pinia持久化

Pinia 是一个 Vue3 状态管理库，它提供了一种简单和直接的方式来管理应用程序中的状态。Pinia 不提供内置的持久化功能，但是你可以使用第三方库来实现 Pinia 的持久化。

一种常见的持久化解决方案是使用浏览器的本地存储，例如 localStorage 或 sessionStorage。你可以创建一个插件来将 Pinia 状态存储在本地存储中，并在应用程序启动时从本地存储中读取状态。下面是一个示例插件：

import { defineStore } from 'pinia'

export function createPersistedState(name, storage) {
  return {
    // 在插件安装时调用
    onInstall: (app, store) => {
      // 从存储中读取状态
      const savedState = storage.getItem(name)
      if (savedState) {
        store.replaceState(JSON.parse(savedState))
      }

      // 订阅 store 的变化，将状态保存到存储中
      store.$subscribe((mutation) => {
        storage.setItem(name, JSON.stringify(store.$state))
      })
    },

    // 在插件卸载时调用
    onUninstall: (app, store) => {
      // 取消订阅 store 的变化
      store.$unsubscribeAll()
    },
  }
}

// 创建一个 store
export const useMyStore = defineStore({
  id: 'myStore',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})

// 安装插件
app.use(createPersistedState('myStore', localStorage))

在上面的示例中，我们创建了一个名为 `createPersistedState` 的函数，它接受存储名称和存储对象（例如 localStorage）作为参数。该函数返回一个插件对象，该插件对象在安装时从存储中读取状态，并在状态更改时将状态保存到存储中。

我们还创建了一个名为 `useMyStore` 的 store，它包含一个 `count` 属性和一个 `increment` 方法。最后，我们使用 `createPersistedState` 插件将 `useMyStore` store 的状态保存到 localStorage 中。