Pinia的持久化处理（附带实例）

Pinia 管理的状态数据与 Vuex 一样，在刷新和关闭浏览器后再次打开都将重置为初始状态。那么如何实现 Pinia 状态数据的持久化处理呢？

其实解决办法与 Vuex 是类似的，开发者可以利用 Pinia 的持久化插件来轻松实现。这里选择使用 pinia-plugin-persistedstate 来实现，它默认使用 Local Storage 存储状态数据。

首先下载 pinia-plugin-persistedstate 工具包：

npm install pinia-plugin-persistedstate

然后在 main.js 文件中引入并安装 Pinia 的持久化插件（即 pinia-plugin-persistedstate 工具包）：

import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
// 引入 Pinia 的持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
// 安装 Pinia 的持久化插件
pinia.use(piniaPluginPersistedstate);

createApp(App).use(pinia).mount('#app');

最后对要实现状态数据持久化的 Pinia 模块进行持久化的开启配置，比如我们要对计数器模块的 count 进行持久化处理，只需在 counter.js 文件中添加 persist 为 true 的配置即可：

const useCounterStore = defineStore('counter', {
  ...
  ...
  persist: true // 声明开启持久化
});

运行项目，点击更新次数的按钮，刷新和关闭浏览器后再次打开，即可显示最新的次数。

我们可以通过 Google Chrome 浏览器的“Application”调试面板查看 LocalStorage 中保存的数据，如下图所示：


当前只保存了计数器模块的状态数据，如果用户列表模块也需要进行状态数据的持久化处理，则只需要在对应的 Pinia 模块中配置 persist 为 true 即可。