https://github.com/huybuidac/vuex-extensions
Reset Vuex to initial state and supporting getters/mutations/actions mixins
https://github.com/huybuidac/vuex-extensions
mixins reset reset-store state state-management vue vuex vuex-store
Last synced: 7 months ago
JSON representation
Reset Vuex to initial state and supporting getters/mutations/actions mixins
- Host: GitHub
- URL: https://github.com/huybuidac/vuex-extensions
- Owner: huybuidac
- License: mit
- Created: 2020-01-13T09:47:40.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-25T09:09:06.000Z (about 2 years ago)
- Last Synced: 2025-02-15T15:38:09.710Z (8 months ago)
- Topics: mixins, reset, reset-store, state, state-management, vue, vuex, vuex-store
- Language: JavaScript
- Homepage:
- Size: 2.72 MB
- Stars: 40
- Watchers: 3
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
---
:fire: **HEADS UP!** You're currently looking at Vuex-extensions 1 branch. If you're looking for Vuex-extensions 4, [please check out `vuex4` branch](https://github.com/huybuidac/vuex-extensions/tree/vuex4).
---
Reset function and Mixins option for Vuex
# Vuex Extensions
Add Reset and Mixins function to Vuex
## Resources
* Medium: [Reset Vuex Modules to initial state](https://medium.com/@huybuidac_12792/reset-vuex-module-state-d2573bfbd78)
* Medium: [How to use Mixins in Vuex](https://medium.com/@huybuidac_12792/how-to-use-mixins-in-vuex-777f7dc0e5a6)
## Install
You can install it via NPM
```console
npm install vuex-extensions@1.2.2
```
or YARN
```console
yarn add vuex-extensions@1.2.2
```
## Usage
Check out the example on [CodeSandbox](https://codesandbox.io/s/lively-thunder-hrh2o).
[](https://codesandbox.io/s/lively-thunder-hrh2o)
#### Creating Vuex.Store
```js
import Vuex from 'vuex'
import { createStore } from 'vuex-extensions'
export default createStore(Vuex.Store, {
plugins: []
modules: {}
})
```
#### Mixins: adding some default getters/mutations/actions to all modules
```js
const store = createStore(Vuex.Store, {
modules: {
sub: {
namespaced: true,
state: {
count: 0
}
}
},
mixins: {
mutations: {
changeState: function (state, changed) {
Object.entries(changed)
.forEach(([name, value]) => {
state[name] = value
})
}
}
}
})
store.commit('sub/changeState', { count: 1 })
```
#### Store resets to initial State
```js
// Vue Component
this.$store.reset()
```
```js
// Vuex action
modules: {
sub: {
actions: {
logout() {
this.reset()
}
}
}
}
```
##### Reset with option
Assume: store has structure as:
```
root
- state: { count: 0 }
- modules:
- child1
- state: { count: 0 }
- modules:
- grandchild1 { state: { count: 0 } }
- grandchild2 { state: { count: 0 } }
- child1
- state: { count: 0 }
- modules:
- grandchild1 { state: { count: 0 } }
- grandchild2 { state: { count: 0 } }
```
After some actions, store has state:
```js
{
state: { count: 1 },
child1: {
state: { count: 1 }
grandchild1: { state: { count: 1 } }
grandchild2: { state: { count: 1 } }
},
child1: {
state: { count: 1 }
grandchild1: { state: { count: 1 } }
grandchild2: { state: { count: 1 } }
}
}
```
```js
// Reset root state only, all submodules are ingored
this.$store.reset({ self: true, nested: false })
// {
// state: { count: 0 },
// child1: {
// state: { count: 1 }
// grandchild1: { state: { count: 1 } }
// grandchild2: { state: { count: 1 } }
// },
// child1: {
// state: { count: 1 }
// grandchild1: { state: { count: 1 } }
// grandchild2: { state: { count: 1 } }
// }
// }
// Reset child1 and all it's sub modules, all other modules are ingored
this.$store.reset({
self: false,
nested: false, // if nested is not set (undefined), it will be equal to self
modules: { child1: { self: true} }
})
// {
// state: { count: 1 },
// child1: {
// state: { count: 0 }
// grandchild1: { state: { count: 0 } }
// grandchild2: { state: { count: 0 } }
// },
// child1: {
// state: { count: 1 }
// grandchild1: { state: { count: 1 } }
// grandchild2: { state: { count: 1 } }
// }
// }
// Rest grandchild1 state only, all other modules are ingored
this.$store.reset({
self: false,
// nested: false,
modules: {
child1: {
modules: {
grandchild1: { self: true }
}
}
}
})
// {
// state: { count: 1 },
// child1: {
// state: { count: 1 }
// grandchild1: { state: { count: 0 } }
// grandchild2: { state: { count: 1 } }
// },
// child1: {
// state: { count: 1 }
// grandchild1: { state: { count: 1 } }
// grandchild2: { state: { count: 1 } }
// }
// }
```