vuex-persistedstate 在store内有模块化，如何使用

Vuex-PersistedState 是一个 Vuex 插件，用于将 Store 中的状态持久化到浏览器的localStorage中。它特别适用于需要在页面刷新或关闭后保留数据的应用场景。当 store 内部存在模块化的结构时，使用它可以简化状态管理，并按照模块进行存储和恢复。

以下是使用步骤：

1. 安装插件：首先需要安装 `vuex-persistedstate` 和 `vue-router`（如果你的项目使用了路由），可以在 `npm` 或 `yarn` 上运行相应的命令。

npm install vuex-persistedstate vue-router
# 或者
yarn add vuex-persistedstate vue-router

2. 配置 store：在创建 Vuex Store 的时候，引入插件并配置它。将需要持久化的状态指定为 `meta.persist` 属性，例如：

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    moduleA: {
      state: { ... },
      mutations: { ... },
      actions: { ... },
      getters: { ... },
      meta: {
        // 将这部分状态保存和恢复
        persist: ['key1', 'key2']
      }
    },
    moduleB: { ... }
  },
  plugins: [createPersistedState()]
});

3. 需要在每个模块内部处理异步操作时，你可以设置默认值，以便于在初次加载时不依赖 localStorage 数据：

actions: {
  async fetchData({ commit }) {
    const data = localStorage.getItem('moduleA_key1') || await someAsyncFunction();
    commit('setData', data);
  }
}

4. 当组件挂载时，Vuex-PersistedState 自动在组件卸载后清除本地存储的数据，避免内存泄漏。