博客站

在 Pinia 中实现持久化存储通常需要将 Store 的状态保存到本地存储（如 localStorage 或 sessionStorage），并在应用初始化时恢复这些状态。以下是实现持久化存储的几种常见方法：

1. 手动实现持久化

你可以手动在 Store 中使用 localStorage 或 sessionStorage 来保存和恢复状态。

示例：手动实现持久化

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

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: Number(localStorage.getItem('count')) || 0, // 从 localStorage 恢复状态
  }),
  actions: {
    increment() {
      this.count++;
      localStorage.setItem('count', this.count.toString()); // 保存状态到 localStorage
    },
  },
});

2. 使用插件实现持久化

Pinia 支持插件机制，可以通过插件自动将 Store 的状态保存到本地存储，并在应用初始化时恢复状态。

示例：自定义持久化插件

// plugins/persistence.ts
import { PiniaPluginContext } from 'pinia';

export function persistencePlugin(context: PiniaPluginContext) {
  const storeId = context.store.$id;

  // 从 localStorage 恢复状态
  const savedState = localStorage.getItem(storeId);
  if (savedState) {
    context.store.$patch(JSON.parse(savedState));
  }

  // 监听状态变化并保存到 localStorage
  context.store.$subscribe((mutation, state) => {
    localStorage.setItem(storeId, JSON.stringify(state));
  });
}

使用插件

// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import { persistencePlugin } from './plugins/persistence';

const pinia = createPinia();
pinia.use(persistencePlugin); // 使用持久化插件

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

3. 使用第三方库 pinia-plugin-persistedstate

pinia-plugin-persistedstate 是一个专门为 Pinia 设计的持久化插件，使用非常简单。

安装

npm install pinia-plugin-persistedstate

使用

// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); // 使用持久化插件

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

在 Store 中启用持久化

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

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

配置持久化选项

你可以为每个 Store 配置不同的持久化选项，例如使用 sessionStorage 或指定保存的键名。

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

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
  persist: {
    key: 'my-custom-key', // 自定义键名
    storage: sessionStorage, // 使用 sessionStorage
    paths: ['count'], // 只保存 count 字段
  },
});

4. 选择性持久化

如果只需要持久化 Store 的部分状态，可以通过插件或 pinia-plugin-persistedstate 实现选择性持久化。

示例：选择性持久化

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

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    tempData: null,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
  persist: {
    paths: ['count'], // 只持久化 count 字段
  },
});

5. 处理复杂数据类型

如果需要持久化复杂数据类型（如 Date 或自定义类），可以在持久化时进行序列化和反序列化。

示例：处理复杂数据类型

// stores/user.ts
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe',
    lastLogin: null as Date | null,
  }),
  actions: {
    login() {
      this.lastLogin = new Date();
    },
  },
  persist: {
    serializer: {
      serialize: (state) => {
        return JSON.stringify({
          ...state,
          lastLogin: state.lastLogin ? state.lastLogin.toISOString() : null,
        });
      },
      deserialize: (value) => {
        const data = JSON.parse(value);
        return {
          ...data,
          lastLogin: data.lastLogin ? new Date(data.lastLogin) : null,
        };
      },
    },
  },
});

总结

在 Pinia 中实现持久化存储的常见方法包括：

1. 手动实现：使用 localStorage 或 sessionStorage 手动保存和恢复状态。
2. 自定义插件：通过 Pinia 插件机制实现自动持久化。
3. 使用第三方库：如 pinia-plugin-persistedstate，简化持久化配置。
4. 选择性持久化：只持久化部分状态。
5. 处理复杂数据类型：通过序列化和反序列化处理复杂数据。

根据项目需求选择合适的方法，pinia-plugin-persistedstate 是推荐的方式，因为它简单且功能强大。