使用 Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题

vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。

vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。

利用vuex-persistedstate插件

插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法

使用方法

安装：

npm install vuex-persistedstate --save
引入及配置
 
在store下的index.js中
 
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState()]
})
默认存储到localStorage
 
想要存储到sessionStorage，配置如下
 
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState({
  storage: window.sessionStorage
 })]
})
// 想使用cookie同理

默认持久化所有state

指定需要持久化的state,配置如下：

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState({
  storage: window.sessionStorage,
  reducer(val) {
   return {
   // 只储存state中的assessmentData
   assessmentData: val.assessmentData
  }
  }
 })]
// vuex引用多个插件的写法

createPersistedState([options])使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：

key ：存储持久状态的键。（默认：vuex）

paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）

reducer ：一个函数，将被调用来基于给定的路径持久化的状态。默认包含这些值。

subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)

storage ：而不是（或与）getState和setState。默认为localStorage。

getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。

setState ：将被调用来保持给定状态的函数。默认使用storage。

filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true

ps:如果使用model拆分过，写法如下

//举例此为登录的store文件
import login from '@/store/login/login';

//localStorage缓存,需要手动删除或者重新赋值才会修改
const vuexLocal = createPersistedState({
  key: 'vuexLocal',
  storage: window.localStorage,
  paths: ['login.isLogin']
});

//会话关掉,数据清空
const vuexSession = createPersistedState({
     key: 'vuexsession',
     storage: window.sessionStorage,
     paths: ['login.userInfo']
});
export default new Vuex.Store({
    state: {},
  mutations: {},
  getters: {},
  actions: {},
  modules: {
    login
  },
  plugins: [vuexLocal, vuexSession]
});

参考：原文链接：https://blog.csdn.net/qq_43340606/article/details/126020339 ,Vue项目实践-vuex-persistedstate-modules内持久化使用 - 简书 (jianshu.com)