Vuex数据状态持久化-vuex-persistedstate

Vuex 作为一个专为 Vue.js 应用程序开发的状态管理模式，在中大型项目中备受青睐，它有着天然的优势：响应式的共享状态 及可跟踪的状态变化。然而它也存在着明显的缺陷：页面刷新数据丢失。这非常容易理解，页面刷新重新加载需要重新实例化store：const store = new Vuex.Store({state: {}})，状态当然会变为初始值。那么如何在刷新页面后保存之前的状态呢？

1.  安装：npm install --save vuex-persistedstate

2. 配置： 使用vuex-persistedstate默认存储到localStorage

• 引入及配置：在store下的index.js中

• 
  import Vuex from "vuex";
  Vue.use(Vuex);
  import persistedState from "vuex-persistedstate";
  export default new Vuex.Store({
    plugins: [
      persistedState({
        storage: window.sessionStorage, //指定缓存的位置 默认会将state缓存在localstorage里
        // reducer(val) { 指定需要缓存的状态
        //   return {
        //     // 只保存module user内部所有变量持久化
        //     user: val.user,
        //   };
        // },
      }),
    ],
    state: {},
    mutations: {},
    actions: {},
  });