vuex 联动 sessionStorage 对数据持续存储

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

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

const sessionStoragePlugin = store => {
  store.subscribe((mutation, state) => {
    Object.keys(state).forEach((item, index) => {
      //  sessionStorage.setItem 可以把数据加密下，取值的时候也需要解密
      window.sessionStorage.setItem(item, JSON.stringify(state[item]))
    })
  })
}

export default sessionStoragePlugin

2. 状态初始化

let vuxdata = null
try {
  // 如果session加密了这里取值需要解密
  vuxdata = JSON.parse(sessionStorage.getItem('vuxdata')) || {}
} catch (error) {
  vuxdata = {}
}
const state = {
  one: vuxdata.one || null
}

export default {
  state,
}

 

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

import Vue from 'vue'

import Vuex from 'vuex'

import sessionStoragePlugin from './sessionStoragePlugin'

import vuexdata from './vuexdata.js'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    vuexdata,
  },
  // strict: process.env.NODE_ENV !== 'production',
  plugins: [sessionStoragePlugin]
})

 

 

 以上