vue3自定义pinia持久化插件

vue3自定义pinia持久化插件

默认情况下，Pinia 的 store 实例和状态是存储在内存中的。每次你刷新页面或重新加载应用程序时，内存中的状态会丢失,所以要用到状态持久化。

1. 初始化:
   • 当 store 初始化时，initState 函数从 localStorage 中加载之前保存的状态，并将其应用到当前的 Pinia store 中。
2. 状态变化监听:
   • 每当 store 的状态发生变化时，context.store.$subscribe 中的回调函数会被触发，将新的状态保存到 localStorage 中。

$subscribe 是 Pinia 提供的一种方法，用于订阅 store 的状态变化。当 store 的状态发生变化时，订阅者会收到通知。这个方法非常适合用于实现状态的持久化、调试和其他需要响应状态变化的功能。

$patch 是 Pinia 提供的一种方法，用于部分更新 store 的状态。与直接赋值不同，$patch 可以更新状态的一部分而不是整个状态对象。这对于只需修改状态的某些属性而不想重置整个状态时非常有用。

import { PiniaPluginContext } from "pinia";
export default function localState(context: PiniaPluginContext) {
  // 每次初始化都会触发一次 在这里面可以直接进行初始化
  const initState = () => {
    const currentState = JSON.parse(
      localStorage.getItem(context.store.$id) || "{}"
    );
    // 把当前的缓存里面的状态放到pinia里
    context.store.$patch(currentState);
  };
  initState();
  /**
   * 监听state变化，每次变化放到localstorage里
   */
  // 每次state变化都会触发
  context.store.$subscribe((mutation, state) => {
    // 把变化的值存到localstorage里
    localStorage.setItem(mutation.storeId, JSON.stringify(state));
  });
}