vue-persistedstate + pinia 怎么搭配使用

Vue-PersistedState是一个用于Vue.js应用状态持久化的插件，它能将Vue组件的状态保存到浏览器本地存储中。而Pinia是Vue 3.x官方推荐的状态管理模式，它是基于Vuex的一个轻量级替代品。

要在Vue-PersistedState和Pinia之间配合使用，你需要做以下几个步骤：

1. 安装依赖：首先安装`vue-persistedstate` 和 `@pinia/core`，如果还没安装的话：

   npm install vue-persistedstate @pinia/core

2. 设置Pinia store：创建Pinia store并管理你的数据状态，例如：

   import { createStore } from '@pinia/core';
   const userStore = createStore({
     id: 'user',
     state: () => ({
       userInfo: localStorage.getItem('userInfo') || {},
     }),
     actions: {
       // 更新用户信息的方法
       updateUserInfo(data) {
         localStorage.setItem('userInfo', data);
         // 可以在这里同步更新store的状态
       },
     },
   });

3. 配合Vue-PersistedState：在`setup()`钩子中，注册`usePersistedState`：

   import { usePersistedState } from 'vue-persistedstate';

   setup() {
     const persistedUser = usePersistedState(userStore.state.userInfo);
     return {
       persistedUser,
       updateUser: (data) => userStore.updateUserInfo(data),
     };
   }

4. 使用持久化后的数据：当你需要访问或修改用户信息时，可以直接操作`persistedUser`，并且当数据变化时会自动保存到本地。

5. 适当处理初次加载和更新：在组件挂载时，如果`localStorage`中没有`userInfo`，可以初始化默认值，并在数据更新后检查是否需要同步到本地。