pinia-plugin-persistedstate在vue3+ts中的用法

pinia-plugin-persistedstate是一个用于在Vue 3 + TypeScript中持久化状态的插件。它可以帮助我们将应用程序的状态保存在本地存储中，以便在刷新页面或重新加载应用程序时保持状态的一致性。

使用pinia-plugin-persistedstate的步骤如下：

1. 安装pinia-plugin-persistedstate插件：

   npm install pinia-plugin-persistedstate

2. 在main.ts文件中导入相关依赖：

   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. 在需要持久化状态的store中使用`persist`装饰器：

   import { defineStore, persist } from 'pinia'

   export const useMyStore = defineStore('myStore', {
     state: () => ({
       count: 0,
     }),
     actions: {
       increment() {
         this.count++
       },
     },
   })

   export const myStore = useMyStore()

   persist(myStore, { key: 'myStore' }) // 指定存储的键名

   export default myStore

通过以上步骤，pinia-plugin-persistedstate插件会自动将指定store的状态保存在本地存储中。当应用程序重新加载时，插件会自动从本地存储中恢复状态。