vue中pinia数据一直重复获取之前的值的解决方法
更新时间:2024年04月12日 09:54:13 作者:咤娃勇闯天涯
这篇文章主要介绍了vue中pinia数据一直重复获取之前的值的解决方法,如果想让pinia数据不会重复获取之前的值需要手动强制触发 Pinia store 的状态更新,文中有详细的解决方法,需要的朋友可以参考下
概要
如果想让pinia数据不会重复获取之前的值需要手动强制触发 Pinia store 的状态更新。
场景描述
有个业务如果token有效期失效需要重新跳转到login页面。
技术细节
不进行手动刷新
路由守卫
router.beforeEach( async(to: any, from: any, next: any) =>{
let userStore = useUserStore()
let token = userStore.token;
if(token){
try {
// token有效期验证(能访问表示token有效)
await userStore.queryUser(0,1)
next()
}catch (error){
//无效移除user信息并跳转到登录页
REMOVE_USER()
next("/login")
}
}else if(to.path == "/login"){
next()
}else {
next("/login")
}
})
pinia数据
let useUserStore = defineStore("User", {
state: (): any => {
return {
token: GET_USER(),
menuList: constantRoutes,
username: "",
avatar: ""
}
},
actions: {
refreshToken() {
this.token = GET_USER();
},
// other actions}



根据以上代码发现直接获取pinia中的数据,就算移除了user,数据还是保持没移除之前的数据。导致重复执行await userStore.queryUser(0,1);
把
try {
await userStore.queryUser(0,1)
next()
}catch (error){
REMOVE_USER()
next("/login")
}
改为
try {
await userStore.queryUser(0,1)
next()
}catch (error){
REMOVE_USER()
userStore.refreshToken()
next("/login")
}
实现手动刷新token的值获取最新的值。


成功获取到token的最新状态,token失效跳转到首页。
以上就是vue中pinia数据一直重复获取之前的值的解决方法的详细内容,更多关于vue pinia重复获取的资料请关注脚本之家其它相关文章!
相关文章
vue+element下日期组件momentjs转换赋值问题解决
这篇文章主要介绍了vue+element下日期组件momentjs转换赋值问题,记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题,需要的朋友可以参考下2024-02-02
vue页面中使用getElementsByClassName无法获取元素的解决
这篇文章主要介绍了vue页面中使用getElementsByClassName无法获取元素的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03


最新评论