vue3数据的持久化

1.使用 pinia-plugin-persistedstate 实现 Pinia 仓库状态持久化，且完成测试。

pnpm i pinia-plugin-persistedstate
# or
npm i pinia-plugin-persistedstate
# or
yarn add pinia-plugin-persistedstate

 2.使用 main.ts。

import persist from 'pinia-plugin-persistedstate'
const app = createApp(App)
// 注意使用的方式
app.use(createPinia().use(persist))

3.配置 stores/user.ts。

import type { User } from '@/types/user'
import { defineStore } from 'pinia'
import { ref } from 'vue'

export default defineStore(
    'cp-user',
    () => {
        // 用户信息
        const user = ref<User>()
        // 设置用户，登录后使用
        const setUser = (u: User) => {
            user.value = u
        }
        // 清空用户，退出后使用
        const delUser = () => {
            user.value = undefined
        }
        return { user, setUser, delUser }
    },
    {
        persist: true
    }
)