Vue3+Pinia---登录---用户数据持久化
2. Pinia的存储是基于内存的，刷新就丢失，为了保持登录状态就要做到刷新不丢失，需要配合持久化进行存储。这里使用Pinia的一个插件: pinia-plugin-persistedstate。（用来标识当前用户是否登录），而Token持续一段时间才会过期。也存一份，刷新的时候会从localStorage中先取。：操作state时会自动把用户数据在本地的。：保持token不丢失，保持登录状态。3
·
持久化用户数据说明：
1. 用户数据中有一个关键的数据叫做Token （用来标识当前用户是否登录），而Token持续一段时间才会过期
2. Pinia的存储是基于内存的，刷新就丢失，为了保持登录状态就要做到刷新不丢失，需要配合持久化进行存储
目的：保持token不丢失，保持登录状态
最终效果：操作state时会自动把用户数据在本地的localStorage也存一份，刷新的时候会从localStorage中先取
这里使用Pinia的一个插件: pinia-plugin-persistedstate
1. 安装：
npm i -pinia-plugin-persistedstate
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,
}
)
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)