+
++ +[](https://github.com/robinvdvleuten/shvl/actions?query=workflow%3Atest) +[](https://www.npmjs.com/package/shvl) +[](https://www.npmjs.com/package/shvl) +[](https://github.com/robinvdvleuten/shvl/blob/master/LICENSE) + +[](http://makeapullrequest.com) + + +
+
+
+## Installation
+
+```
+npm install --save shvl
+```
+
+The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com/shvl/dist/shvl.umd.js):
+
+```
+
+```
+
+This exposes the shlv object as a global.
+
+## Usage
+
+```js
+import * as shvl from 'shvl';
+
+let obj = {
+ a: {
+ b: {
+ c: 1
+ d: undefined
+ e: null
+ }
+ }
+};
+
+// Use dot notation for keys
+shvl.set(obj, 'a.b.c', 2);
+shvl.get(obj, 'a.b.c') === 2;
+
+// Or use an array as key
+shvl.get(obj, ['a', 'b', 'c']) === 1;
+
+// Returns undefined if the path does not exist and no default is specified
+shvl.get(obj, 'a.b.c.f') === undefined;
+```
+
+## Changelog
+
+Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+
+
+
+ Robin van der Vleuten 💬 💻 📖 💡 🤔 🚇 👀 ⚠️ |
+  ajenkinski 💻 |
+
+ +[](https://github.com/robinvdvleuten/vuex-persistedstate/actions?query=workflow%3Atest) +[](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) + + +
+
+
+## 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 { createStore } from "vuex";
+import createPersistedState from "vuex-persistedstate";
+
+const store = createStore({
+ // ...
+ plugins: [createPersistedState()],
+});
+```
+
+For usage with for Vuex 3 and Vue 2, please see [3.x.x branch](https://github.com/robinvdvleuten/vuex-persistedstate/tree/3.x.x).
+
+## Examples
+
+Check out a basic 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)
+
+### Example with Vuex modules
+
+New plugin instances can be created in separate files, but must be imported and added to plugins object in the main Vuex file.
+
+```js
+/* module.js */
+export const dataStore = {
+ state: {
+ data: []
+ }
+}
+
+/* store.js */
+import { dataStore } from './module'
+
+const dataState = createPersistedState({
+ paths: ['data']
+})
+
+export new Vuex.Store({
+ modules: {
+ dataStore
+ },
+ plugins: [dataState]
+})
+```
+
+### Example with Nuxt.js
+
+It is possible to use vuex-persistedstate with Nuxt.js. It must be included as a NuxtJS plugin:
+
+#### With local storage (client-side only)
+
+```javascript
+// nuxt.config.js
+
+...
+/*
+ * Naming your plugin 'xxx.client.js' will make it execute only on the client-side.
+ * https://nuxtjs.org/guide/plugins/#name-conventional-plugin
+ */
+plugins: [{ src: '~/plugins/persistedState.client.js' }]
+...
+```
+
+```javascript
+// ~/plugins/persistedState.client.js
+
+import createPersistedState from 'vuex-persistedstate'
+
+export default ({store}) => {
+ createPersistedState({
+ key: 'yourkey',
+ paths: [...]
+ ...
+ })(store)
+}
+```
+
+#### Using cookies (universal client + server-side)
+
+Add `cookie` and `js-cookie`:
+
+`npm install --save cookie js-cookie`
+or `yarn add cookie js-cookie`
+
+```javascript
+// nuxt.config.js
+...
+plugins: [{ src: '~/plugins/persistedState.js'}]
+...
+```
+
+```javascript
+// ~/plugins/persistedState.js
+
+import createPersistedState from 'vuex-persistedstate';
+import * as Cookies from 'js-cookie';
+import cookie from 'cookie';
+
+export default ({ store, req }) => {
+ createPersistedState({
+ paths: [...],
+ storage: {
+ getItem: (key) => {
+ // See https://nuxtjs.org/guide/plugins/#using-process-flags
+ if (process.server) {
+ const parsedCookies = cookie.parse(req.headers.cookie);
+ return parsedCookies[key];
+ } else {
+ return Cookies.get(key);
+ }
+ },
+ // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
+ setItem: (key, value) =>
+ Cookies.set(key, value, { expires: 365, secure: false }),
+ removeItem: key => Cookies.remove(key)
+ }
+ })(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