vuex用于管理项目中的全局状态，但是我们一刷新vuex中保存的全局状态就会被全部初始化，vuex-persistedstate组件已经帮我们完成了同步更新，就是用浏览器本地缓存了数据。

  1. npm install vuex-persistedstate --save

然后用vuex中的plugins属性挂载
配合state使用，存放在store目录下的index.js，来存储状态


import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
  state,
  mutations,
  getters,
  plugins: [createPersistedState()]
})

API

createPersistedState([options])

使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：

  • key ：存储持久状态的键。（默认：vuex）
  • paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）
  • reducer ：一个函数，将被调用来减少基于给定的路径持久化的状态。默认包含这些值。
  • subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)
  • storage ：而不是（或与）getState和setState。默认为localStorage。
  • getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。
  • setState ：将被调用来保持给定状态的函数。默认使用storage。
  • filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true

    自定义存储

    如果在本地存储中存储Vuex存储的状态并不理想。人们可以轻松地实现功能使用cookie（或任何其他你可以想到的）; ```javascript import { Store } from ‘vuex’ import createPersistedState from ‘vuex-persistedstate’ import * as Cookies from ‘js-cookie’

    • const store = new Store({ // … plugins: [ createPersistedState({ storage: { getItem: key => Cookies.get(key), setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }), removeItem: key => Cookies.remove(key) } }) ] })

    实际上，可以传递任何遵循存储协议（getItem，setItem，removeItem等）的对象：
```javascript
// 用sessionStorage替换localStorage
createPersistedState({ storage: window.sessionStorage })

    原文链接：https://www.cnblogs.com/kdcg/p/9099993.html