vue3 vuex数据持久化

在 Vue3 中，可以使用 localStorage 或 sessionStorage 来实现 Vuex 数据的持久化。具体步骤如下：

1. 安装 vuex-persistedstate 包

npm install vuex-persistedstate

2. 在 store/index.js 中引入 vuex-persistedstate 包并使用它

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

const store = createStore({
  // 定义状态和 mutations
  plugins: [createPersistedState()],
});

export default store;

3. 在 plugins 中添加 createPersistedState 选项

const store = createStore({
  // 定义状态和 mutations
  plugins: [
    createPersistedState({
      storage: window.sessionStorage, // 存储方式，可以是localStorage或sessionStorage
    }),
  ],
});

这样就可以实现 Vuex 数据的持久化了。需要注意的是，由于 localStorage 和 sessionStorage 存储的数据是字符串，因此在读取数据时需要进行 JSON.parse() 操作。