特点

• ✅ pinia 的持久化
• ✅ 各个模块支持自定义持久化配置
• ✅ 支持indexedDB、storage进行存储，解决容量大小问题
• ✅ 支持通过配置前缀、后缀，防止子项目之间持久化数据互相污染

安装

// npm
npm i pinia-plugin-persistedstore
// yarn
yarn add pinia-plugin-persistedstore
// pnpm
pnpm i pinia-plugin-persistedstore

使用

初始化

// 直接配置插件
import { createPinia } from 'pinia'
import piniaPluginPersistedStore from 'pinia-plugin-persistedstore'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

如果你不想要同域名下子项目持久化数据之间互相污染，可以配置前缀或后缀

// 为缓存添加前缀后缀
import { createPlugin } from 'pinia-plugin-persistedstore';

const store = createPinia();

const store = createPinia();

store.use(
  createPlugin({
    prefix: 'sunshine_prefix',
    suffix: 'sunshine_suffix',
  }),
);

模块配置

模块想要启用持久化，可以配置 persist 参数，它的类型是 TPersist

export interface IBasePersist {
  // 持久化存储的key（可选）
  key?: string;
  // 需要持久化的数据的路径（可选）
  paths?: string[];
  // 还原前执行函数（可选）
  beforeRestore?: (context: PiniaPluginContext) => void;
  // 还原后执行函数（可选）
  afterRestore?: (context: PiniaPluginContext) => void;
  // 还原失败打印报错（可选）
  debug?: boolean;
}

export interface IPersist extends IBasePersist {
  // storage类型，有localStorage、sessionStroage（可选）
  storage?: Storage;
  // 使用 indexedDB 或 storage（可选）
  type?: 'storage' | 'db';
}

// persist 的类型
export type TPersist = boolean | IPersist;

当你要启用持久化时，可以这么做

export const useUserStore = defineStore({
  id: 'app-user',
  persist: true, // 开启持久化
  state: (): UserState => ({
    name: 'sunshine'
  })
});

当你设置 persist = true 时，此模块开启了持久化功能，相当于传入了

  persist: {
    storage: localStorage,
    type: 'storage',
    key: $store.id, // 此模块的默认id
    paths: null,
    beforeRestore: null,
    afterRestore: null,
    debug: false,
  }

当然你也可以自己去进行配置，比如以下例子

export const useUserStore = defineStore({
  id: 'app-user',
  persist: {
    type: 'db',
    key: 'user_key',
    paths: ['userInfo', 'token'],
    beforeRestore: () => {
      console.log('beforeRestore');
    },
    afterRestore: () => {
      console.log('afterRestore');
    },
    debug: true,
  },
  state: (): UserState => ({
    userInfo: null,
    token: undefined,
    roleList: [],
  }),
});