VUE3 pinia的持久化插件pinia-plugin-persist

pinia-plugin-persist 是另一个用于将 Pinia store 的状态持久化的插件，和 pinia-plugin-persistedstate 类似，功能上也支持将 Pinia store 中的数据持久化到浏览器的存储中（如 localStorage 或 sessionStorage），并在页面刷新时恢复状态。

安装和使用

1. 安装插件

你可以通过 npm 或 yarn 来安装 pinia-plugin-persist 插件。

npm install pinia-plugin-persist

2. 配置 Pinia 和插件

在你的 Vue 应用中，首先配置 Pinia 使用 pinia-plugin-persist 插件。你可以在 main.js 或 main.ts 中进行配置。

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPersist from 'pinia-plugin-persist'; // 导入插件
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

// 使用插件
pinia.use(piniaPersist);

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

3. 配置 Store

在定义 Pinia store 时，启用持久化功能。你可以在 store 的配置中设置 persist 选项来指定持久化。

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
  persist: true,  // 开启持久化
});

4. 高级配置选项

你还可以通过配置 persist 来定制存储的行为。常见的选项包括：

• enabled: 是否启用持久化（默认为 true）。
• storage: 存储类型，默认为 localStorage，可以设置为 sessionStorage 或自定义存储。
• paths: 指定哪些 state 需要被持久化。
• key: 自定义存储的 key 名称，默认是 store 的名字。

例如：

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    userData: {},
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
    setUserData(data) {
      this.userData = data;
    },
  },
  persist: {
    enabled: true,               // 启用持久化
    storage: localStorage,       // 使用 localStorage 存储
    paths: ['count'],            // 只持久化 count
    key: 'my-custom-counter',    // 自定义存储的 key
  },
});

5. 存储类型

默认情况下，持久化存储使用 localStorage。如果你想使用 sessionStorage 存储状态，可以进行配置：

persist: {
  storage: sessionStorage,   // 设置为 sessionStorage
}

• localStorage：浏览器关闭后仍然有效，适用于长期存储数据。
• sessionStorage：浏览器会话结束时会被清除，适用于临时数据。

6. 持久化路径（Paths）

通过配置 paths，你可以选择仅持久化某些 state。例如，假设你的 store 包含多个状态，但你只希望持久化部分数据，可以像这样配置：

persist: {
  paths: ['count'],  // 只持久化 count 属性
}

如果不配置 paths，默认情况下整个 store 的状态都会被持久化。

7. 清除持久化数据

如果需要清除持久化的数据，可以在代码中手动清除：

import { useCounterStore } from './stores/counter';

const counterStore = useCounterStore();
counterStore.$reset();  // 重置 store

也可以直接通过浏览器开发者工具删除 localStorage 或 sessionStorage 中的数据，或通过 JavaScript 手动清除。

8. 同步多个标签页

如果你使用 localStorage 存储数据，多个浏览器标签页之间的状态是不会自动同步的。如果需要在不同标签页之间同步，可以使用 window.addEventListener('storage', ...) 来监听存储事件。

总结

pinia-plugin-persist 插件是用于将 Pinia store 状态持久化到浏览器存储的一个工具，它可以让你在页面刷新或浏览器重启后保持应用的状态。通过该插件，你可以自由选择存储方式、持久化的内容以及如何管理数据的生命周期。