vuex中使用vuex-persistedstate无法进行持久缓存

在vuex的mutations中发送axios请求造成响应数据无法持久缓存

最近在开发一个基于vue3的后台管理系统，因为要使用到了动态路由和权限管理，所以需要请求用户所属角色的一个权限信息，并将这些信息通过vuex-persistedstate持久保存到localStorage中。

起初我在配置vuex的中mutations中使用axios向服务端请求用户的权限信息，并使用vuex-persistedstate进行持久缓存，但是打开浏览器的F12看到并没有保存到响应数据，然后我检查了一遍vuex中的代码,发现mutations 应该是同步的，直接在 mutations 中进行异步操作（如调用 API）是不推荐的。

import { createStore } from 'vuex'
import { getRouter } from '../util/api'
import createPersistedState from 'vuex-persistedstate'
const store = createStore({
  state () {
    return {
      router:{},
      menu:[]
    }
  },
  mutations: {
    increment (state) {
      getRouter().then((arr)=>{
               state.router=arr.data.user
               const arrMenu=[]
               arr.data.user.path.forEach(element => {
                 if(element.type==1){
                  arrMenu.push(element)
                 }
               });
               state.menu=arrMenu
               console.log(state.menu);
               
        }).catch((err)=>{
          console.log(err)
        })
    }
  },
  plugins: [
    createPersistedState({
      key: 'vuex',
      storage: window.localStorage,
      paths: ['router', 'menu']
    })
  ]

})

export default store

接下来，对上面这段代码进行重构一下，使用 actions 来处理异步请求，并保留 mutations 用于同步状态更新。

这样就可以使用vuex-persistedstate 插件来持久化 router 和 menu 状态到 localStorage

import { createStore } from 'vuex';  
import { getRouter } from '../util/api';  
import createPersistedState from 'vuex-persistedstate';  
  
const store = createStore({  
  state() {  
    return {  
      router: {},  
      menu: []  
    };  
  },  
  mutations: {  
    SET_ROUTER(state, routerData) {  
      state.router = routerData;  
    },  
    SET_MENU(state, menuData) {  
      state.menu = menuData;  
    }  
  },  
  actions: {  
    async loadRouterAndMenu({ commit }) {  
      try {  
        const response = await getRouter();  
        const { user } = response.data;  
        let menu = [];  
        user.path.forEach(element => {  
          if (element.type === 1) {  
            menu.push(element);  
          }  
        });  
        commit('SET_ROUTER', user);  
        commit('SET_MENU', menu);  
        console.log(this.state.menu); // 使用 this.state 或通过 getters 访问  
      } catch (error) {  
        console.error('Failed to load router and menu:', error);  
      }  
    }  
  },  
  plugins: [  
    createPersistedState({  
      key: 'vuex',  
      storage: window.localStorage,  
      paths: ['router', 'menu']  
    })  
  ]  
});  
  
export default store;