vue2中如何使用vuex-persist

vuex-persist 是一个用于在 Vuex 状态管理中实现持久化存储的库。它可以将 Vuex 的状态保存到本地存储或其他持久化存储中，以便在页面刷新或重新加载时保持状态。

在 Vue 2 中，你可以按照以下步骤来使用 vuex-persist：

1. 安装 vuex-persist：

npm install vuex-persist --save

 

1. 在你的 Vuex store 文件中引入 vuex-persist 并配置：

// 在你的 store 文件中
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

const store = new Vuex.Store({
  // ...你的其他模块和状态

  plugins: [createPersistedState()],
});

1. 如果你想要指定存储的键名或者使用其他配置，你可以传递一个对象作为参数：

// 在你的 store 文件中
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

const store = new Vuex.Store({
  // ...你的其他模块和状态

  plugins: [
    createPersistedState({
      key: 'my-vuex-persist-key', // 存储键名
      paths: ['module1', 'module2'], // 指定要持久化的模块路径
      storage: window.localStorage, // 指定存储引擎，默认为 window.localStorage
    }),
  ],
});

在这个例子中，你需要将 module1 和 module2 替换为你实际使用的 Vuex 模块路径。这样，只有这些模块的状态会被持久化到本地存储中。

以上就是在 Vue 2 中使用 vuex-persist 的基本步骤。这将确保你的 Vuex 状态在页面刷新时得以保存和还原。