关于vuex持久化

1.vuex插件

vuex-persistedstate

插件在每次mutation的时候将数据保存，存到localStorage，sessionStorage，cookie有中（具有getItem ，setItem ，removeItem一般方法的对象），然后页面初始化的时候，读取存储的state值，覆盖state的初始值

2.js插件

vue-vuex-persist

和vuex插件每次mutation保存对象相似，这就给我们提供另外一种缓存思路。
vue-vuex-persist利用浏览器生命周期中的beforeunload事件。beforeunload会在页面卸载之前执行。如刷新，返回到其他页面，关闭等操作都会触发这个事件。

这里主要介绍第一种

cnpm install vuex-persistedstate --save

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  plugins: [createPersistedState()],
})

默认存在localStorage中
也可以设定存在sessionStorage中

const store = new Vuex.Store({
  plugins: [createPersistedState({ storage: window.sessionStorage })],
})

还可以用cookie, 用官方给的demo并没有成功，推荐还是用上面的方法

import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Vuex.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)
    }
  })],
})