1、我的目的,我需要在pinia 中调用了actions 的方法后动态的去更新userState持久化存储
src\store\modules\user.ts
import { defineStore } from 'pinia'
import { getUserInfo, loginRegister } from '@/api/login'
export const useUserStore = defineStore({
// id: 必须的,在所有 Store 中唯一
id: 'userState',
// state: 返回对象的函数
state: () => ({
// 登录token
token: null,
// 登录用户信息
userInfo: {},
// 角色
roles: localStorage.roles ? JSON.parse(localStorage.roles) : [],
}),
getters: {},
// 可以同步 也可以异步
actions: {
// 登录
login(userInfo) {
return new Promise(async (resolve, reject) => {
loginRegister(userInfo)
.then(async (data) => {
resolve(data)
this.token = data.data
if (this.token) {
let userData = await this.getRoles()
this.userInfo = userData
}
})
.catch((err) => {
reject(err)
})
})
},
// 获取用户授权角色信息,实际应用中 可以通过token通过请求接口在这里获取用户信息
getRoles() {
return new Promise((resolve, reject) => {
getUserInfo().then((data) => {
// 获取权限列表-是否是管理员
if (data.data.isSuperAdmin) {
this.roles = ['admin']
localStorage.roles = JSON.stringify(this.roles)
}
resolve(data.data)
})
})
},
// 退出
logout() {
return new Promise((resolve, reject) => {
this.token = null
this.userInfo = {}
this.roles = []
localStorage.clear();
resolve(null)
})
},
},
// 进行持久化存储
persist: {
// 本地存储的名称
key: 'userState',
//保存的位置
storage: window.localStorage, //localstorage
},
})
2、调用pinia中的$patch方法
// 每次调用actions中的getRoles后,把返回的状态重新设置进行持久化存储
let userData = await UserStore.getRoles()
// 使用 UserStore.$patch() 方法来手动触发状态的更新,并将最新的状态保存到本地存储中。
UserStore.$patch((state) => {
state.userInfo = userData
})