vue3 vuex 数据持久化

在 Vue3 中，可以使用 vuex-persistedstate 库实现 Vuex 数据的持久化。这个库可以将 Vuex 中的数据存储到本地存储中，从而实现数据的持久化。具体使用方法如下：

1. 安装 vuex-persistedstate 库：

npm install vuex-persistedstate

2. 在 Vuex 中引入 vuex-persistedstate：

import { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate';

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

3. 配置 vuex-persistedstate：

import { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate';

const store = createStore({
  // ...
  plugins: [
    createPersistedState({
      // 存储到 localStorage
      storage: window.localStorage,
    }),
  ],
});

以上代码中，我们在 Vuex 的 `plugins` 选项中引入了 `createPersistedState`，并在其中配置了 `storage` 选项为 `window.localStorage`，表示将数据存储到 localStorage 中。如果要将数据存储到 sessionStorage 中，可以将 `storage` 选项改为 `window.sessionStorage`。

配置完毕后，当 Vuex 中的数据发生变化时，vuex-persistedstate 会自动将数据存储到本地存储中。在应用启动时，vuex-persistedstate 会自动从本地存储中读取数据，并将其恢复到 Vuex 中。这样就实现了 Vuex 数据的持久化。