快捷導(dǎo)航

vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法

更新時間：2024年04月12日 09:54:13 作者：咤娃勇闖天涯

這篇文章主要介紹了vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法,如果想讓pinia數(shù)據(jù)不會重復(fù)獲取之前的值需要手動強(qiáng)制觸發(fā) Pinia store 的狀態(tài)更新,文中有詳細(xì)的解決方法,需要的朋友可以參考下

概要

如果想讓pinia數(shù)據(jù)不會重復(fù)獲取之前的值需要手動強(qiáng)制觸發(fā) Pinia store 的狀態(tài)更新。

場景描述

有個業(yè)務(wù)如果token有效期失效需要重新跳轉(zhuǎn)到login頁面。

技術(shù)細(xì)節(jié)

不進(jìn)行手動刷新

路由守衛(wèi)

router.beforeEach( async(to: any, from: any, next: any) =>{
    let userStore = useUserStore()
    let token = userStore.token;
    if(token){
        try {
        // token有效期驗(yàn)證（能訪問表示token有效）
          await userStore.queryUser(0,1)
         next()
        }catch (error){
        	//無效移除user信息并跳轉(zhuǎn)到登錄頁
            REMOVE_USER()
            next("/login")
        }
    }else if(to.path == "/login"){
        next()
    }else {
        next("/login")
    }

})

pinia數(shù)據(jù)

let useUserStore = defineStore("User", {

    state: (): any => {
        return {
            token: GET_USER(),
            menuList: constantRoutes,
            username: "",
            avatar: ""
        }
    },
    actions: {
            refreshToken() {
                this.token = GET_USER();
            },
            // other actions}

在這里插入圖片描述

根據(jù)以上代碼發(fā)現(xiàn)直接獲取pinia中的數(shù)據(jù)，就算移除了user，數(shù)據(jù)還是保持沒移除之前的數(shù)據(jù)。導(dǎo)致重復(fù)執(zhí)行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")
        }

實(shí)現(xiàn)手動刷新token的值獲取最新的值。

在這里插入圖片描述