怎么使 Pinia 的数据的持久化

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. 配置到需要持久化的文件，将persist设置为true

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
    }
)