vue中pinia数据一直重复获取之前的值的解决方法
作者：咤娃勇闯天涯
这篇文章主要介绍了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重复获取的资料请关注脚本之家其它相关文章！