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 })
以上