手写pinia 持久化插件pinia-plugin-persistedstate

Pinia是一个Vue 3状态管理库，它提供了一种简单的方法来管理应用程序的状态。而pinia-plugin-persistedstate是Pinia的一个持久化插件，它可以将Pinia的状态持久化到本地存储中，以便在刷新页面或重新加载应用程序时保留状态。如果你想手写pinia持久化插件，可以按照以下步骤进行：
1. 创建一个插件对象，该对象应该有一个install方法，该方法接收一个Pinia实例作为参数。
2. 在install方法中，使用Pinia提供的$onAction和$onMutation方法来监听状态的变化。
3. 在状态变化时，将状态持久化到本地存储中。
4. 在插件对象中添加一个uninstall方法，该方法应该取消对状态变化的监听。
5. 最后，在Pinia实例上使用use方法来安装插件。

下面是一个示例代码，展示了如何手写pinia持久化插件：

import { PiniaPlugin } from 'pinia'

export const myPersistedState: PiniaPlugin = {
  install(pinia) {
    // 监听状态变化
    pinia.$onAction((action) => {
      // 将状态持久化到本地存储中
      localStorage.setItem(action.type, JSON.stringify(action.payload))
    })
    pinia.$onMutation((mutation) => {
      localStorage.setItem(mutation.type, JSON.stringify(mutation.payload))
    })

    // 添加一个uninstall方法，用于取消监听
    myPersistedState.uninstall = () => {
      pinia.$offAction()
      pinia.$offMutation()
    }
  },
  // 卸载插件时取消监听
  uninstall() {}
}