数据状态持久化插件 vuex-persistedstate 的使用

在 Vue.js 应用中，使用 Vuex 状态管理库时，页面刷新会导致 Vuex 中的状态丢失，因为 Vuex 的状态是存储在内存中的。为了在页面刷新后仍然保留这些状态，你可以采用以下几种策略来持久化 Vuex 的状态：

1. 使用 Local Storage 或 Session Storage

   • 可以在页面加载时从 Local Storage 或 Session Storage 中读取状态，并将其恢复到 Vuex store 中。
   • 页面刷新前，可以将 Vuex 的状态保存到 Local Storage 或 Session Storage 中。

2. 重新请求接口从后端获取

   • 在路由守卫 beforeEach() 中发送请求, 再次将数据存储到 vuex store 中

3. 使用 Vuex 插件

   • 有一些现成的插件可以帮助你更容易地实现状态持久化，例如 vuex-persistedstate。

使用 Local Storage 或 Session Storage

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
   
  state: {
   
    userMsg: null,
  },
  mutations: {
   
    setUserMsg(state, payload) {
   
      state.userMsg = payload;
      localStorage.setItem('userMsg', JSON.stringify(payload));
    },
  },
});

封装 beforeEach() 函数重新请求接口获取

// src/permission.js
import store from '@/store';
import {
    getUserInfo, } from '@/api/user';