pinia-state-sync-storage

安装

npm i inia-state-sync-storage

用法

插件引入

import { PiniaNonreactiveState } from 'pinia-state-sync-storage';

pinia.use(
  PiniaStateSyncStorage({
    // 读取缓存的key
    key: 'storageKey',
  }),
)

pinia store配置

const useTestStore = defineStore({
  id: 'testStoreId',
  state: () => ({
    text: '123'
  }),
  stateSyncStorage: {
    key: 'storageKey',
    // key支持函数类型
    // key: (storeId) => `${storeId}_${queryId}`,
  },
})

key 对应 storage ID，需要和持久化插件的key保持一致。

清空事件监听：$unbindStorageEvents

页面卸载后，需要解绑 storage 事件监听：

onBeforeUnmount(() => {
  testStore.$unbindStorageEvents();
});

按需同步: useJsonPatch

const useStore = defineStore({
  id: 'testStoreId',
  state: () => ({
    text: '123'
  }),
  stateSyncStorage: {
    // 读取缓存的key
    key: 'storageKey',
    useJsonPatch: true,
  },
})

开启 useJsonPatch 后，插件会比对新旧缓存数据的差异，生成 json patch 数组，进而按需更新pinia状态。 useJsonPatch 关闭则使用 pinia.$patch 全量更新。

自定义反序列化函数: deserialize

const useStore = defineStore({
  id: 'testStoreId',
  state: () => ({
    text: '123'
  }),
  stateSyncStorage: {
    // 读取缓存的key
    key: 'storageKey',
    // 默认为`JSON.parse`
    deserialize: (data) => {
      return cusCudeserialize(data)''
    };
  },
})

该函数配置需要和持久化插件的反序列函数逻辑保持一致，如果持久化插件没有序列化函数的配置，则无需配置。 默认为JSON.parse