Vuex状态持久化

描述

Vuex用于处理组件之间通信以及状态管理的问题;

Vuex本质上就是一个保存在内存中的对象，存在的问题就是当页面刷新后该对象就会被重新初始化;

之前存的数据就拿不到了，于是在使用这些数据的地方就可能发生报错;

解决的方法就是把state中的数据做一个持久化存储或者说备份;

一般就存在localStorage、sessionStorage或者cookies中;

这里以localStorage为例

存localStorage的话，数据不会因为页面或浏览器的关闭而丢失，只有手动清除;

在Vuex初始化的时候就尝试去localStorage里面读取之前的数据，再存回state中;

这样当页面刷新或关闭后再打开时，state中还是有之前的数据;

存sessionStorage的话，数据会在页面关闭后被清除;

一般就借助第三方插件来实现，如 vuex-persistedstate、 vuex-persist使用都很方便

注意

不管是localStorage还是sessionStorage相对Vuex来说安全性都要差一些;

因为前两者都是可以直接在浏览器控制台进行查看，修改和删除的;

由于localStorage是不会过期的，我们也可以给他设置一个过期时间，👉具体实现可以点击查看这篇文章👈

插件1 —vuex-persistedstate

gitHub:https://github.com/robinvdvleuten/vuex-persistedstate

// 安装
// yarn add vuex-persistedstate
// 或
// npm install --save vuex-persistedstate


// 使用
// store.js
import Vuex from "vuex"
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)

const store = new Vuex.Store({
  modules,
  getters,
  plugins: [
    // 持久化插件配置
    createPersistedState({
      // storage:存储位置，localStorage或sessionStorage或cookie
      // cookie 存储方式有区别，下面单独讲
      // 默认存储在localStorage中
      storage: window.sessionStorage,
      // 存储的 key 值，默认是vuex
      key: 'vueX',
      // 要存储的数据,render函数的参数是state对象
      render(state) {
        return { ...state }
        // 我这里直接把state中的全部数据解构存进去，
        // 也可以只存需要的数据，以key:value的形式
        // 如下
        // return {userName:state.userName}
      }
    })
  ]
})

存cookie的配置

// 存cookie的话可以再引入两个cookie插件，方便对cookie进行操作
// npm install --save cookie js-cookie
// 或者
// yarn add cookie js-cookie

import * as Cookies from 'js-cookie';
import cookie from 'cookie';

plugins: [
    persistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7}),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]

插件2 —vuex-persist

gitHub:https://github.com/championswimmer/vuex-persist

vuex-persist不需要手动存取 storage
而是直接将状态保存至 localStorage 或者cookie中

// 安装 
// npm install --save vuex-persist 
// 或者
// yarn add vuex-persist

// 使用
// store.js
import VuexPersistence from 'vuex-persist'

// 实例化插件
// 配置和第一个插件差不多，
const vuexLocal = new VuexPersistence({
	storage: window.localStorage,
    render(state) {
        return { ...state }
        // 我这里直接把state中的全部数据解构存进去，
        // 也可以只存需要的数据，以key:value的形式
        // 如下
        // return {userName:state.userName}
      }
})

const store = new Vuex.Store({
    state,
    actions,
    mutations,
   // 传入配置后的插件实例
  plugins:[vuexLocal.plugins]
})

两个插件从上手度来说都差不多，但从gitHub来看第一个插件的用户应该会更多些，本人也是使用的第一个