Pinia 数据持久化储存（pinia-plugin-persistedstate） 详细代码配置

好的，我会为您提供 Pinia 数据持久化储存插件（pinia-plugin-persistedstate）的详细代码配置。

首先，您需要安装 `pinia-plugin-persistedstate` 插件：

npm install pinia-plugin-persistedstate

然后，在您的 Vue.js 项目中，您需要创建一个 Pinia 实例，并使用 `use` 方法加载 `pinia-plugin-persistedstate` 插件：

import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'

const pinia = createPinia()

pinia.use(createPersistedState({
  key: 'my-app-state', // 存储在本地存储中的键名
  initialState: () => ({ // 初始状态
    count: 0,
    todos: []
  }),
  storage: window.localStorage // 存储在哪个存储中（可选）
}))

以上代码中，我们使用了 `createPersistedState` 方法创建一个持久化状态插件实例，并将其传递给 `pinia.use()` 方法以加载插件。

在 `createPersistedState` 方法中，您需要传递一个对象参数，包含以下选项：

- `key`：在本地存储中存储状态的键名。
- `initialState`：状态的初始值。这可以是一个对象或一个函数，该函数返回一个对象。
- `storage`：指定存储状态的存储对象。默认是 `window.localStorage`。

现在，您可以在 Pinia store 中使用持久状态了。例如：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})

以上代码中，我们定义了一个简单的计数器存储。现在，我们可以在组件中使用 `useCounterStore`：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
import { useCounterStore } from './store'

export default {
  setup() {
    const counterStore = useCounterStore()

    return {
      count: counterStore.count,
      increment: counterStore.increment,
      decrement: counterStore.decrement
    }
  }
}
</script>

现在，每当用户增加或减少计数器时，状态都会自动持久化到本地存储中。当用户刷新页面或重新打开应用程序时，状态将从本地存储中自动加载。