pinia-plugin-persist-orm

Pinia plugin to persist stores

快速开始

1. 使用你喜欢的包管理器:

• npm: npm i pinia-plugin-persist-orm
• pnpm: pnpm i pinia-plugin-persist-orm
• yarn: yarn add pinia-plugin-persist-orm

2. 添加插件到pinia:

import { createPinia } from 'pinia';
import piniaPluginPersistORM from 'pinia-plugin-persist-orm';

const pinia = createPinia();
pinia.use(piniaPluginPersistORM);

配置

1. 默认使用的localStorage, 修改如下:

// 全局修改
import { createPinia } from 'pinia';
import {piniaPluginPersistORM} from 'pinia-plugin-persist-orm';

const pinia = createPinia();
pinia.use(piniaPluginPersistORM({
  // 在这里进行全局配置, 具体参考 types.d.ts 文件
}));


// 局部修改
import { defineStore } from "pinia";

export const useWktStore = defineStore('wkt', {
  state: () => ({
    // 类似于组件的 data, 用来存储全局状态
  }),
  getters:{
    // 类似于组件的 computed, 封装计算属性, 有缓存功能
  },
  actions: {
    // todo
    // 类似于组件的 methods, 封装业务逻辑, 修改 state 等
  },
  persist: { // 开启持久化功能
    // 指定持久化的容器, useStoreDB 是手动封装的操作 IndexedDB 的类(需要外部实现)
    // 这个操作类需要实现基本的两个方法: getItem 和 setItem
    storage: useStoreDB as unknown as Storage
  }
});

说明

1. 该插件是在pinia-plugin-persistedstate的基础之上得到的;
2. 由于pinia-plugin-persistedstate只支持localStorage,sessionStorage这两种持久化方式, 持久化的空间大小就有了限制;
3. 为了解决持久化空间大小的限制, 扩展了对IndexedDB支持;
4. 众所周知IndexedDB的所有操作都是异步的, 具体请查看;
5. 对操作getItme方法的方法进行了异步改造, 以对IndexedDB的支持;
6. 可能需要是用watch或watchEffect等Apis监听pinia仓库数据的变更, 这在刷新页面的时候很有效;