🔥 HEADS UP! You're currently looking at Vuex-extensions 1 branch. If you're looking for Vuex-extensions 4, please check out vuex4 branch.
Reset function and Mixins option for Vuex
Add Reset and Mixins function to Vuex
- Medium: Reset Vuex Modules to initial state
- Medium: How to use Mixins in Vuex
You can install it via NPM
npm install vuex-extensions@1.2.2or YARN
yarn add vuex-extensions@1.2.2Check out the example on CodeSandbox.
import Vuex from 'vuex' import { createStore } from 'vuex-extensions' export default createStore(Vuex.Store, { plugins: [] modules: {} }) 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 })// Vue Component this.$store.reset()// Vuex action modules: { sub: { actions: { logout() { this.reset() } } } }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:
{ 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 } } } }// 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 } } // } // }