vuex数据持久化之插件vuex-persist

基于vue项目中做数据持久化

步骤一：安装 vuex-persistedstate 或者 vuex-persist

    npm install --save vuex-persist or yarn add vuex-persist

步骤二:在store引入及配置：store下的index.js中引入

    import VuexPersistence from 'vuex-persist'
    const vuexLocal = new VuexPersistence({
        storage: window.localStorage
    })

    const store = new Vuex.Store({
      state: {},
      mutations: {},
      actions: {},
      getters,
      plugins: [vuexLocal.plugin]
    }) 

vuex-persist 的详细属性：

属性 类型 描述

key	string	将状态存储在存储中的键。默认: 'vuex'
storage	Storage (Web API) 可传localStorage, sessionStorage, localforage 或者你自定义的存储对象.	接口必须要有get和set. 默认是: window.localStorage
saveState	function (key, state[, storage])	如果不使用存储，这个自定义函数将保存状态保存为持久性。
restoreState	function (key[, storage]) => state	如果不使用存储，这个自定义函数处理从存储中检索状态
reducer	function (state) => object	将状态减少到只需要保存的值。默认情况下，保存整个状态。
filter	function (mutation) => boolean	突变筛选。看mutation.type并返回true，只有那些你想坚持写被触发。所有突变的默认返回值为true。
modules	string[]	要持久化的模块列表。