问题：用户登录成功后根据用户token获取用户信息，getInfo接口还没有成功返回，系统已进入主页，导致主页头部展示的用户类型无法正常显示。
/* 用户信息 */
import { serverApi } from '@/api'
import { defineStore, StoreDefinition } from 'pinia'
export const useUserInfosStore: StoreDefinition<'userInfos'> = defineStore({
id: 'userInfos',
state: (): { userInfo } => ({
userInfo: {}, //基本信息
}),
actions: {
/**
* @function 设置用户信息
*/
async setUserInfos() {
const res = await serverApi.use('GET:/kqcs/getInfo')()
const info = res.data
this.userInfo = info || {}
return this.userInfo
},
},
})
// 此写法如果actions异步接口getInfo请求时间较长，此页面已经渲染，导致userName取不到
import { useUserInfosStore } from '@/store'
const userInfo = useUserInfosStore().userInfo
userName.value = userInfo.userName
解决：通过subscribe监听storev变化，更新页面数据
const subscribe = store.$subscribe(
(mutation, state) => {
/*
* mutation主要包含三个属性值：
* events：当前state改变的具体数据，包括改变前的值和改变后的值等等数据
* storeId：是当前store的id
* type：用于记录这次数据变化是通过什么途径，主要有三个分别是
* “direct” ：通过 action 变化的
”patch object“ ：通过 $patch 传递对象的方式改变的
“patch function” ：通过 $patch 传递函数的方式改变的
*
* */
// 在此处监听store中值的变化，当变化为某个值的时候，做一些业务操作
userName.value = state.userInfo.userName
},
{ detached: false }
// detached:布尔值，默认是 false，正常情况下，当订阅所在的组件被卸载时，订阅将被停止删除，
// 如果设置detached值为 true 时，即使所在组件被卸载，订阅依然在生效
// 参考文档：https://pinia.web3doc.top/core-concepts/state.html#%E8%AE%A2%E9%98%85%E7%8A%B6%E6%80%81
)
// 停止订阅
// subscribe() //调用上方声明的变量值，示例（subscribe），即可以停止订阅
