pinia-nonreactive-state

安装

npm i pinia-nonreactive-state

用法

插件引入

import { PiniaNonreactiveState } from 'pinia-nonreactive-state';

pinia.use(PiniaNonreactiveState);

pinia store配置

const useTestStore = defineStore({
  id: 'testStoreId',
  state: () => ({
    text: '123'
  }),
  nonreactiveState: true,
})

生成非响应式store：$nonReactive

store初始化完成后直接调用 $nonReactive，可直接生成非响应式的store实例。这个实例保留了原始store的state和action，并且允许我们通过调用action或直接赋值来更新其状态，但这些更新不会触发响应式更新。

import { useMedalStore } from '@/stores/medal';

const medalStore = useMedalStore().$nonReactive?.() as ReturnType<typeof useMedalStore>;

手动持久化：$persistNonreactiveState

在对非响应式的store进行状态更新后，我们需要主动调用 $persistNonreactiveState 方法缓存更新后的数据。 这个方法接受一个参数，即缓存ID，它可以是字符串类型或函数类型。其使用方式与持久化插件中的key属性相同。

const customCacheId = (id) =>
    `${getStoreKeyPrefixWithUrlparams(['space_id'], {
      space_id: spaceId,
    })}__${id}`;

// 加载成功，更新持久化数据
detailCardStore.$persistNonreactiveState(customCacheId);

注意：使用该方法前须先接入持久化插件，因为它需要根据持久化插件的配置来确定哪些字段可被缓存。

自定义序列化函数: serialize

可自定义序列化函数，序列化后的数据直接存储到缓存，默认为JSON.stringify。

const useStore = defineStore({
  id: 'testStoreId',
  state: () => ({
    text: '123'
  }),
  nonreactiveState: {
    // 自定义序列化函数，序列化后的数据直接存储到缓存，默认为`JSON.stringify`
    serialize: (stateObj) => {
      return cusSerialize(stateObj);
    };
  },
})

注意：该函数配置需要和持久化插件的序列函数逻辑保持一致，如果持久化插件没有序列化函数的配置，则无需配置。