Vuex---数据持久化的多种方式

vuex无论你喜不喜欢或者想不想，但凡涉及到了Vue项目多数时候你都会需要。但万物都有弊端，页面刷新后状态，数据丢失一直很头大。

而这个问题我们也常常在面试中被问到，传统的解决方案是Vuex+sessionStorage等存储方案解决

好吧 不墨迹直接上封装好的干货，喜欢那个选那个。直接在Vuex中调用即可

var Storage = {
  // ==================sessionStorage设置缓存================
  // 设置缓存
  sessionSet: function (name, data, expires) {
    sessionStorage.removeItem(name)
    sessionStorage.setItem(name, JSON.stringify(data))
    if (expires && expires instanceof Date) {
      sessionStorage.removeItem(`${name}__expires`)
      sessionStorage.setItem(`${name}__expires`, new Date(expires).getTime())
    }
  },
  // 获取缓存
  sessionGet: function (name) {
    if (sessionStorage.getItem(`${name}__expires`)) {
      const now = Date.now()
      const expires = sessionStorage.getItem(`${name}__expires`)
      if (now >= expires) {
        sessionStorage.removeItem(name)
        sessionStorage.removeItem(`${name}__expires`)
        return undefined
      } else {
        return JSON.parse(sessionStorage.getItem(name))
      }
    } else {
      return JSON.parse(sessionStorage.getItem(name))
    }
  },
  // 清除缓存
  sessionRemove: function (name) {
    sessionStorage.removeItem(name)
  },
  // ==================localStorage设置缓存==================
  // 设置缓存
  localSet: function (name, data, expires) {
    localStorage.removeItem(name)
    localStorage.setItem(name, JSON.stringify(data))
    if (expires && expires instanceof Date) {
      localStorage.removeItem(`${name}__expires`)
      localStorage.setItem(`${name}__expires`, new Date(expires).getTime())
    }
  },
  // 获取缓存
  localGet: function (name) {
    if (localStorage.getItem(`${name}__expires`)) {
      const now = Date.now()
      const expires = localStorage.getItem(`${name}__expires`)
      if (now >= expires) {
        localStorage.removeItem(name)
        localStorage.removeItem(`${name}__expires`)
        return undefined
      } else {
        return JSON.parse(localStorage.getItem(name))
      }
    } else {
      return JSON.parse(localStorage.getItem(name))
    }
  },
  // 清除缓存
  localRemove: function (name) {
    localStorage.removeItem(name)
  }

}

export default Storage

 //保存到session中并更新到vuex
          Storage.sessionSet("region", res.data);

当然这是一种很传统又不怎么美观优雅的做法。
别急有个东西很优雅vuex-persistedstate，作为后生的解决Vuex数据持久化的插件像任何一个插件一样你只需要 npm install --save vuex-persistedstate 它就是你的了
通过文档我们也可以了解到目前他已经完美的支持了vuex-persistedstate 3.x (for Vuex 3 and Vue 2)两个版本
当我们安装好后只需要在我们的store中

import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [persistedState()]
})

因为persistedState内部其实默认使用的是localStorage在做存储，当我们需要一些特殊的处理方式时也可以自定义去存储例如我们使用

sessionStorage

plugins: [
    persistedState({ storage: window.sessionStorage })
]

js-cookie

import { Store } from "vuex";
import createPersistedState from "vuex-persistedstate";
import * as Cookies from "js-cookie";
 
const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: (key) => Cookies.get(key),
        setItem: (key, value) =>
        Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: (key) => Cookies.remove(key),
      },
    }),
  ],
});