Pinia实现持久化保存数据

Pinia 不提供内置的持久化解决方案，但可以使用第三方插件来实现 Pinia 的持久化。

下面介绍两种实现 Pinia 持久化的方法：

一、使用 vuex-persistedstate 插件：

vuex-persistedstate 是一个 Vue.js 和 Vuex 插件，可以将 Vuex 状态持久化到本地存储中。由于 Pinia 基于 Vue 3，因此需要使用 vuex-persistedstate@next 版本。

使用方法如下：

安装插件：
npm install vuex-persistedstate@next
在 Pinia 实例化时使用插件：

import createPersistedState from 'vuex-persistedstate';

const pinia = createPinia();

pinia.use(createPersistedState({
  // 配置项
}));

配置项可以设置以下选项：

key：存储在本地存储中的键名，默认为 ‘vuex’。
storage：指定要使用的本地存储，默认为 window.localStorage。
reducer：自定义状态转换函数。
filter：一个函数，用于选择要缓存的 state 子属性。
restoreState：一个函数，用于还原本地存储中的状态。
例如，将 Pinia 的状态存储在 sessionStorage 中：

import createPersistedState from 'vuex-persistedstate';

const pinia = createPinia();

pinia.use(createPersistedState({
  storage: window.sessionStorage,
  key: 'pinia',
}));

二、自定义插件实现持久化：

可以自己编写一个插件来实现 Pinia 的持久化，例如将 Pinia 状态存储在 localStorage 中：

import { createPinia } from 'pinia';

const pinia = createPinia();

pinia.use({
  // 安装插件时调用
  install(app) {
    const storageKey = 'pinia-state';

    // 从本地存储中读取状态
    const storedState = localStorage.getItem(storageKey);

    if (storedState) {
      // 将本地存储的状态转换为 JSON
      const parsedState = JSON.parse(storedState);

      // 恢复存储的状态
      pinia.state.value = parsedState;
    }

    // 监听 Pinia 状态的变化并将其保存到本地存储
    pinia.state.subscribe(newState => {
      localStorage.setItem(storageKey, JSON.stringify(newState));
    });
  },
});

这样就可以实现 Pinia 的状态持久化了。需要注意的是，对于大型应用程序，插件的自定义实现可能会变得复杂，因此建议使用第三方库来实现 Pinia 的持久化。