# vuex-persistedstate
Persist and rehydrate your [Vuex](http://vuex.vuejs.org/) state between page reloads.
[](https://travis-ci.org/robinvdvleuten/vuex-persistedstate)
[](https://www.npmjs.com/package/vuex-persistedstate)
[](https://www.npmjs.com/package/vuex-persistedstate)
[](https://github.com/prettier/prettier)
[](https://github.com/robinvdvleuten/vuex-persistedstate/blob/master/LICENSE)
[](http://makeapullrequest.com)
[](https://github.com/robinvdvleuten/vuex-persistedstate/blob/master/.github/CODE_OF_CONDUCT.md)
## Requirements
- [Vue.js](https://vuejs.org) (v2.0.0+)
- [Vuex](http://vuex.vuejs.org) (v2.0.0+)
## Install
```bash
npm install --save vuex-persistedstate
```
The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com):
```html
```
You can find the library on `window.createPersistedState`.
## Usage
```js
import createPersistedState from "vuex-persistedstate";
const store = new Vuex.Store({
// ...
plugins: [createPersistedState()]
});
```
Check out the example on [CodeSandbox](https://codesandbox.io).
[](https://codesandbox.io/s/80k4m2598)
Or configured to use with [js-cookie](https://github.com/js-cookie/js-cookie).
[](https://codesandbox.io/s/xl356qvvkz)
Or configured to use with [secure-ls](https://github.com/softvar/secure-ls)
[](https://codesandbox.io/s/vuex-persistedstate-with-secure-ls-encrypted-data-7l9wb?fontsize=14)
### Nuxt.js
It is possible to use vuex-persistedstate with Nuxt.js. Due to the order code is loaded in, vuex-persistedstate must be included as a NuxtJS plugin:
```javascript
// nuxt.config.js
...
plugins: [{ src: '~/plugins/localStorage.js', ssr: false }]
...
```
```javascript
// ~/plugins/localStorage.js
import createPersistedState from 'vuex-persistedstate'
export default ({store}) => {
window.onNuxtReady(() => {
createPersistedState({
key: 'yourkey',
paths: [...]
...
})(store)
})
}
```
## API
### `createPersistedState([options])`
Creates a new instance of the plugin with the given options. The following options
can be provided to configure the plugin for your specific needs:
- `key `: The key to store the persisted state under. Defaults to `vuex`.
- `paths `: An array of any paths to partially persist the state. If no paths are given, the complete state is persisted. Paths must be specified using dot notation. If using modules, include the module name. eg: "auth.user" Defaults to `[]`.
- `reducer `: A function that will be called to reduce the state to persist based on the given paths. Defaults to include the values.
- `subscriber `: A function called to setup mutation subscription. Defaults to `store => handler => store.subscribe(handler)`.
- `storage