vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法
概要
如果想讓pinia數(shù)據(jù)不會(huì)重復(fù)獲取之前的值需要手動(dòng)強(qiáng)制觸發(fā) Pinia store 的狀態(tài)更新。
場(chǎng)景描述
有個(gè)業(yè)務(wù)如果token有效期失效需要重新跳轉(zhuǎn)到login頁面。
技術(shù)細(xì)節(jié)
不進(jìn)行手動(dòng)刷新
路由守衛(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)手動(dòng)刷新token的值獲取最新的值。
成功獲取到token的最新狀態(tài)，token失效跳轉(zhuǎn)到首頁。
以上就是vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法的詳細(xì)內(nèi)容，更多關(guān)于vue pinia重復(fù)獲取的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue+ElementUI實(shí)現(xiàn)從后臺(tái)動(dòng)態(tài)填充下拉框的示例代碼
本文主要介紹了Vue+ElementUI實(shí)現(xiàn)從后臺(tái)動(dòng)態(tài)填充下拉框的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了vue2如何獲取上頁的url地址問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue中使用XMLHttpRequest（XHR）可以獲取數(shù)據(jù)的方式與傳統(tǒng)的HTML頁面相同，本文主要來和大家講講它的正確使用方法，希望對(duì)大家有所幫助2023-05-05
詳解Vue2和Vue3的區(qū)別以及其鉤子函數(shù)的使用
Vue.js?3?和?Vue.js?2?是兩個(gè)主要版本的流行前端框架,它們之間有很多區(qū)別,包括性能優(yōu)化、新特性和改進(jìn)的API等,下面就跟隨小編一起來看看他們的使用區(qū)別吧2024-01-01
這篇文章主要給大家介紹了關(guān)于如何利用vue3開發(fā)一個(gè)打磚塊小游戲的相關(guān)資料,通過一個(gè)小游戲?qū)嵗梢钥焖倭私鈜ue3開發(fā)小游戲的流程,需要的朋友可以參考下2021-07-07
v-show?和?v-if?的區(qū)別及使用場(chǎng)景分析
v-show通過CSS控制顯示隱藏,保持DOM元素,適合頻繁切換；v-if根據(jù)條件生成/銷毀DOM,影響生命周期,適用于靜態(tài)條件,兩者在性能、渲染方式及組件狀態(tài)管理上有顯著差異,需根據(jù)具體場(chǎng)景選擇,本文通過實(shí)例代碼解析v-show和v-if的區(qū)別及使用,感興趣的朋友一起看看吧2025-09-09
vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過動(dòng)畫的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
Vue實(shí)現(xiàn)點(diǎn)擊按鈕進(jìn)行上下頁切換
這篇文章主要介紹了Vue實(shí)現(xiàn)點(diǎn)擊按鈕進(jìn)行上下頁的切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
vue實(shí)現(xiàn)錄音功能js-audio-recorder帶波浪圖效果的示例
這篇文章主要介紹了vue實(shí)現(xiàn)錄音功能js-audio-recorder帶波浪圖效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了ant-design-vue按鈕樣式擴(kuò)展方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06