Vuex持久化插件-解决刷新数据消失的问题

1.手动利用HTML5的本地存储

• 方法

vuex的state在localStorage或sessionStorage或其它存储方式中取值
在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。
这样state就会和存储一起存在并且与vuex同步

• 问题

最直观的就是，手动写比较麻烦。
2.利用vuex-persistedstate插件
插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法

使用方法

• 安装

npm install vuex-persistedstate --save

• 引入及配置

在store下的index.js中

    import createPersistedState from "vuex-persistedstate"
    const store = new Vuex.Store({
      // ...
      plugins: [createPersistedState()]
    })

默认存储到localStorage

想要存储到sessionStorage，配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

想使用cookie同理 默认持久化所有state

指定需要持久化的state,配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
      	return {
      	// 只储存state中的assessmentData
    	  assessmentData: val.assessmentData
    	}
	 }
  })]

vuex引用多个插件的写法
譬如：vuex提示的插件和持久化的插件一起使用，配置如下

import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
// 判断环境 vuex提示生产环境中不使用
const debug = process.env.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
  storage: window.sessionStorage
})
export default new Vuex.Store({
 // ...
  plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})

plugins要是一个一维数组不然会解析错误

补充： 同时使用多个储存方式（譬如一些使用sessionStorage一些使用localStorage）
看github上的文档发现没有直接可以这样使用的方式，所以我采用创建多个实例的方式,如下

const createPersisted = createPersistedState({
  storage: window.sessionStorage,
  // 移除sessionState储存的device
  reducer: (vuexState) => {
    let sessionState = Object.assign({}, vuexState)
 
    for (let key in sessionState) {
      if (key === 'device') {
        delete sessionState[key]
      }
    }
    return sessionState
  }
})
const createStorage = createPersistedState({
  key: 'vuexStorage',
  storage: window.localStorage,
  reducer: (vuexState) => {
  // localStorage只储存device信息
    return vuexState.device
  }
})
 
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
    device
  },
  strict: debug,
  plugins: debug ? [createLogger(), createStorage, createPersisted] : [createStorage, createPersisted]
})

reducer: function 返回需要储存的state对象
删除存储内容
有个思路是：写一个mutaition方法，做的事是将所有state制为初始值