若依 vuex 数据持久化

在 Vue 3 中，你可以使用 Vuex 插件来实现数据的持久化。以下是一种常见的方法：

1. 安装 vuex-persistedstate 插件：

npm install vuex-persistedstate

2. 在你的 Vuex store 文件中导入插件，并配置：

import createPersistedState from 'vuex-persistedstate';

const store = createStore({
  // ...
  plugins: [createPersistedState()],
});

3. 默认情况下，插件会将整个 Vuex store 的状态持久化到浏览器的本地存储中。如果你只想持久化特定的模块，可以在配置中指定这些模块的名称：

const store = createStore({
  // ...
  plugins: [
    createPersistedState({
      paths: ['moduleA', 'moduleB'],
    }),
  ],
});

在上面的示例中，只有 `moduleA` 和 `moduleB` 的状态会被持久化。

除了默认的本地存储，vuex-persistedstate 还支持其他存储引擎，比如 cookie、sessionStorage 等。你可以通过传递 `storage` 参数来配置存储引擎。例如，如果要将状态存储到 sessionStorage 中：

import { createWebStorage } from 'vuex-persistedstate';

const store = createStore({
  // ...
  plugins: [
    createPersistedState({
      storage: createWebStorage('sessionStorage'),
    }),
  ],
});

这样就可以实现 Vuex 数据的持久化了。每次刷新页面后，存储在持久化存储中的数据将被还原到 Vuex store 中。