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]
})

 

 

 以上