vuex 联动 sessionStorage 对数据持续存储

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

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

• 封装存储和获取存储的方法，这里用到JSON.stringify和JSON.parse是为了保证存储和获取时的数据类型都一致
• 比如直接存数字0得到的就是数字0，存false时获取到的也是布尔类型的false，也可以存对象或者数据
• 不能存储 undefined ，因为JSON.parse会报错
• 也可以在封装方法中进行存储加密等操作

// 封装存储和获取存储的方法，这里用到JSON.stringify和JSON.parse是为了保证存储和获取时的数据类型都一致
// 比如直接存数字0得到的就是数字0，存false时获取到的也是布尔类型的false，也可以存对象或者数据
// 不能存储 undefined ，因为JSON.parse会报错
// 也可以在封装方法中进行存储加密等操作
const setItem = (key, value) => {
  sessionStorage.setItem(key, value !== undefined ? JSON.stringify(value) : '')
}
const getItem = (key) => {
  try {
    return JSON.parse(sessionStorage.getItem(key))
  } catch (error) {
    return undefined
  }
}
const sessionStoragePlugin = store => {
  // 自动化恢复local中的数据到store
  const localState = JSON.parse(JSON.stringify(store.state))
  Object.keys(store.state).forEach(key => {
    let localData = getItem(key)
    if (localData !== undefined) { // 如果本地存在缓存则恢复数据，如果没有则用state里面定义的默认值
      localState[key] = localData
    }
  })
  store.replaceState(localState)

  // 自动同步vuex中的数据到local
  store.subscribe((mutation, state) => {
    Object.keys(state).forEach((stateName, index) => {
      setItem(stateName, state[stateName])
    })
  })
}
export default sessionStoragePlugin

 

 

2. 将上面暴露出去的东西放在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]
})

 

 

 以上