pinia-plugin-persist案例

pinia-plugin-persist 是一个 Pinia 的插件，它提供了一种简单的方式来将 Pinia 状态持久化到浏览器的本地存储中。下面是一个使用 pinia-plugin-persist 的示例：

import { createPinia } from 'pinia'
import { createPersist } from 'pinia-plugin-persist'

// 创建 Pinia 实例
const pinia = createPinia()

// 创建插件
const persistPlugin = createPersist({
  // 存储名称
  key: 'my-app-state',
  // 存储对象
  storage: localStorage,
})

// 安装插件
pinia.use(persistPlugin)

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

在上面的示例中，我们首先创建了一个 Pinia 实例。然后，我们使用 `createPersist` 函数创建了一个名为 `persistPlugin` 的插件。该函数接受一个包含 `key` 和 `storage` 属性的对象作为参数，其中 `key` 是存储名称，`storage` 是存储对象。在此示例中，我们将存储对象设置为 `localStorage`。

接下来，我们将插件安装到 Pinia 实例中。最后，我们使用 `pinia.createStore` 函数创建了一个名为 `useMyStore` 的 store。这个 store 包含一个 `count` 属性和一个 `increment` 方法。由于我们已经安装了 `persistPlugin` 插件，`useMyStore` 的状态将被自动持久化到 `localStorage` 中。

使用 pinia-plugin-persist 可以帮助你轻松地实现 Pinia 的持久化。