vuex持久化vuex-persistedstate，存储的数据刷新页面后导致数据丢失

1.安装插件

vuex-persistedstate实现数据持久化，来解决使用vuex存储状态时页面刷新后数据消失的问题
vuex-persistedstate：在页面重新加载之间保持并重新补充Vuex状态

npm install --save vuex-persistedstate

 2.具体的代码， 现在需要持久化存储的 requestUrl

user.js

  state: {

    requestUrl: ''

   },

   

   mutations: {

    SET_WEBSITE_ROUTETURL: (state, title) => {

         state.requestUrl = title;

       },

   },

   actions: {

    SetWebSiteTitle_routeUrl({ commit, state }, title) {

         console.log(title)

         commit('SET_WEBSITE_ROUTETURL', title);

       },

   }

index.js

import { createStore } from "vuex";

import app from "./modules/app";

import user from "./modules/user";

import tagsView from "./modules/tagsView";

import permission from "./modules/permission";

// import settings from './modules/settings'

import getters from "./getters";

import dict from './modules/dict'

import createPersistedState from 'vuex-persistedstate';

const vueStore = createStore({

  state: {},

  mutations: {},

  actions: {},

  modules: {

    app,

    user,

    tagsView,

    permission,

    dict,

    // settings

  },

  plugins: [

    createPersistedState({

      storage: window.localStorage,

      reducer(state) {

        return {

          user: {

            requestUrl: state.user.requestUrl, // 只持久化 requestUrl

          },

        };

      },

    }),

  ],

  getters,

});

export default vueStore;

3.验证 localStorage 是否存储成功 

1. 打开 Application > Local Storage。

2. 确认是否存在键名 vuex，其值应包含 requestUrl。

3. 如果没有 vuex 键，说明插件未生效。