Pinia数据持久化插件

这里使用Pinia的一个插件: pinia-plugin-persistedstate

1. 安装： npm i pinia-plugin-persistedstate --save 

2.  将插件添加到 pinia 实例上

// main.js
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
const pinia = createPinia()
app.use(pinia)
pinia.use(piniaPluginPersistedstate)

3. 使用，创建 Store 时，将 persist 选项设置为 true。

// 管理用户数据相关
import {defineStore} from "pinia";
import {ref} from "vue";
import {loginAPI} from "@/apis/user";
 
export const useUserStore = defineStore('user', () => {
        // 1. 定义管理用户数据的state
        const userInfo = ref({})
        // 2. 定义获取接口数据的action函数
        const getUserInfo = async ({account, password}) => {
            const res = await loginAPI({account, password})
            userInfo.value = res.result
        }
        // 3.以对象形式把state和action return
        return {userInfo, getUserInfo}
    },
    {
        persist: true,
    }
)