---

:fire: HEADS UP! You're currently looking at Vuex-extensions 4 branch. If you're looking for Vuex 3, please check out master branch.

---

Reset function and Mixins option for Vuex

Vuex Extensions

Add Reset and Mixins function to Vuex

Resources

* Medium: Reset Vuex Modules to initial state
* Medium: How to use Mixins in Vuex

Install

You can install it via NPM
``console
npm install vuex-extensions
`

or YARN
`console
yarn add vuex-extensions
`

Usage

Check out the example on CodeSandbox.

![Edit vuex-persistedstate](https://codesandbox.io/s/lively-thunder-hrh2o)

#### Creating Vuex.Store
`js
import { Store } from 'vuex'
import { createStore } from 'vuex-extensions'

export default createStore(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
import { useStore } from 'vuex'

// Vue composition
const store = useStore()
store.reset()

// 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 } }
// }
// }
``