解决VUE中的pinia数据一直重复获取之前的值

最新推荐文章于 2025-02-25 13:36:38 发布

咤娃勇闯天涯

最新推荐文章于 2025-02-25 13:36:38 发布

阅读量791

点赞数 23

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/TTruYi/article/details/137650683

版权

文章讲述了在Vue3项目中，如何使用Piniastore管理用户数据时，确保在token失效时正确刷新并更新数据，避免重复请求。通过在catch块中调用`refreshToken`方法来手动刷新token值，解决了数据重复问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

概要

如果想让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")
        }