pinia-plugin-persistedstate 怎么读取持久化中的数据

`pinia-plugin-persistedstate` 是一个 Vue.js Pinia 插件，它帮助你在 Vuex 的状态管理上下文中集成持久化的状态存储。这个插件通常用于将应用的状态保存到浏览器的 localStorage 或 sessionStorage 中，以便在用户刷新页面或离开又返回时能保持数据。

要使用它来读取持久化中的数据，你可以按照以下步骤操作：

1. 安装插件：首先，在项目中安装 `pinia-plugin-persistedstate`。如果使用npm或yarn，可以分别运行：
- npm: `npm install @vue/pinia @vue/persistedstate`
- yarn: `yarn add @vue/pinia @vue/persistedstate`

2. 设置store：在创建Pinia store时，引入并配置插件。例如：

   import { createStore } from '@vue/pinia';
   import persistedStatePlugin from '@vue/persistedstate';

   const appStore = createStore({
     plugins: [persistedStatePlugin()],
     // ...your store setup and state definitions
   });

3. 访问数据：当需要从本地存储加载数据时，可以在store的`actions`或`mutations`中获取：

   // 假设有一个名为 'user' 的状态字段
   export const useUserStore = defineStore('user', {
     getters: {
       loadedUser: () => JSON.parse(window.localStorage.getItem('user')) || {}
     },
     actions: {
       async loadUser() {
         const data = await localStorage.getItem('user');
         this.user = JSON.parse(data) || {};
       }
     },
   });

4. 初始化数据：在组件挂载或store初始化时，调用`loadUser`方法加载数据，然后在组件中使用`loadedUser`属性访问。