pinia-plugin-persistedstate持久化插件在代码中如何使用

`pinia-plugin-persistedstate`是一个用于Vue 3 Pinia状态管理库（类似于Vuex）的持久化插件，它允许你在应用程序关闭或重启后依然保持某些数据的状态。以下是使用这个插件的基本步骤：

1. 安装插件：首先需要安装 `@vue/pinia` 和 `pinia-plugin-persistedstate`。你可以通过npm或yarn来安装：

   npm install vue@next @vue/pinia pinia-plugin-persistedstate
   # 或者
   yarn add vue@next @vue/pinia pinia-plugin-persistedstate

2. 设置store：创建Pinia store时，启用持久化插件：

   import { createApp } from 'vue'
   import { createPinia } from '@vue/pinia'
   import persistedStatePlugin from 'pinia-plugin-persistedstate'

   const app = createApp(App)
   const store = createPinia({
     plugins: [persistedStatePlugin()],
     // ...其他配置
   })

3. 使用持久化存储：在store中声明你想保存的数据，并在适当的地方更新它们：

   export default {
     state: () => ({
       user: localStorage.getItem('user') || {},
     }),
     actions: {
       setUser(data) {
         localStorage.setItem('user', data);
         this.user = data; // 更新store以反映更改
       },
     },
   }

4. 读取存储值：当应用启动时，store会自动从localStorage加载数据：

   created() {
     if (this.user === undefined) {
       this.setUser(JSON.parse(localStorage.getItem('user')));
     }
   },
   beforeDestroy() {
     localStorage.removeItem('user'); // 关闭应用时清除数据
   }