vuex 联动 sessionStorage 对数据持续存储

vuex 联动 sessionStorage 对数据进行持续存储，防止用户手动刷新页面导致vuex数据丢失，页面出错问题

1. 该方法利用vuex的plugins属性实现，直接放代码，（ sessionStorage.setItem 可以把数据加密下，取值的时候也需要解密）

 1 const sessionStoragePlugin = store => {
 2   store.subscribe((mutation, state) => {
 3     Object.keys(state).forEach((item, index) => {
 4       //  sessionStorage.setItem 可以把数据加密下，取值的时候也需要解密
 5       window.sessionStorage.setItem(item, JSON.stringify(state[item]))
 6     })
 7   })
 8 }
 9 
10 export default sessionStoragePlugin

2. 状态初始化

 1 let vuxdata = null
 2 try {
 3   // 如果session加密了这里取值需要解密
 4   vuxdata = JSON.parse(sessionStorage.getItem('vuxdata')) || {}
 5 } catch (error) {
 6   vuxdata = {}
 7 }
 8 const state = {
 9   one: vuxdata.one || null
10 }
11 
12 export default {
13   state,
14 }

 

3. 将上面暴露出去的东西放在vuex 的plugin 里面就好了

 1 import Vue from 'vue'
 2 
 3 import Vuex from 'vuex'
 4 
 5 import sessionStoragePlugin from './sessionStoragePlugin'
 6 
 7 import vuexdata from './vuexdata.js'
 8 
 9 Vue.use(Vuex)
10 
11 export default new Vuex.Store({
12   modules: {
13     vuexdata,
14   },
15   // strict: process.env.NODE_ENV !== 'production',
16   plugins: [sessionStoragePlugin]
17 })

 

 

 以上

来源：https://www.cnblogs.com/blackbentel/p/11976023.html