vue3+vite项目的pinia-plugin-persistedstate怎么使用

要在Vue 3 + Vite项目中使用pinia-plugin-persistedstate插件，你需要按照以下步骤进行设置：

1. 首先，确保你已经安装了`pinia`和`pinia-plugin-persistedstate`插件。可以使用以下命令进行安装：

npm install pinia pinia-plugin-persistedstate

2. 在你的Vue 3项目的入口文件（通常是`main.js`或`main.ts`）中，引入所需的依赖项，并创建一个Pinia实例。示例代码如下：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'
import App from './App.vue'

const pinia = createPinia()
pinia.use(createPersistedState())

createApp(App).use(pinia).mount('#app')

3. 在你的应用程序中，可以在需要的组件中使用Pinia提供的状态管理。示例代码如下：

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

<script>
import { defineComponent } from 'vue'
import { useStore } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore()

    const increment = () => {
      store.count++
    }

    return {
      count: store.count,
      increment,
    }
  },
})
</script>

在这个示例中，我们使用了`useStore`函数来获取Pinia的store实例，并在组件中使用了一个计数器来展示和增加一个`count`状态。

4. 现在，当你的应用程序重新加载或关闭后再次打开时，Pinia插件会自动将状态持久化到本地存储中，以便你可以保留之前的状态。

这就是在Vue 3 + Vite项目中使用pinia-plugin-persistedstate插件的基本步骤。你可以按照这些步骤进行设置，并根据自己的需求进行调整和扩展。