vue中pinia數據一直重復獲取之前的值的解決方法
更新時間：2024年04月12日 09:54:13 作者：咤娃勇闖天涯
這篇文章主要介紹了vue中pinia數據一直重復獲取之前的值的解決方法,如果想讓pinia數據不會重復獲取之前的值需要手動強制觸發(fā) Pinia store 的狀態(tài)更新,文中有詳細的解決方法,需要的朋友可以參考下
概要
如果想讓pinia數據不會重復獲取之前的值需要手動強制觸發(fā) Pinia store 的狀態(tài)更新。
場景描述
有個業(yè)務如果token有效期失效需要重新跳轉到login頁面。
技術細節(jié)
不進行手動刷新
路由守衛(wèi)
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}
根據以上代碼發(fā)現直接獲取pinia中的數據，就算移除了user，數據還是保持沒移除之前的數據。導致重復執(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")
}
實現手動刷新token的值獲取最新的值。
成功獲取到token的最新狀態(tài)，token失效跳轉到首頁。
以上就是vue中pinia數據一直重復獲取之前的值的解決方法的詳細內容，更多關于vue pinia重復獲取的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Vue.js項目中管理每個頁面的頭部標簽的兩種方法,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了詳解Nuxt.js部署及踩過的坑，Nuxt.js 提供了兩種發(fā)布部署應用的方式：服務端渲染應用部署 和 靜態(tài)應用部署。本文主要說說服務端渲染應用部署，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了vue 項目引入echarts 添加點擊事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue?動態(tài)style?拼接寬度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue.js?是一個用于構建用戶界面的漸進式框架,本文主要為大家整理了一些常用的?Vue?方法及其詳細說明和代碼示例,有需要的小伙伴可以參考一下2023-11-11
vue+element下日期組件momentjs轉換賦值問題解決
這篇文章主要介紹了vue+element下日期組件momentjs轉換賦值問題,記錄下使用momentjs轉換日期字符串賦值給element的日期組件報錯問題，需要的朋友可以參考下2024-02-02
這篇文章主要和大家一起簡單學習一下vue指令：directive，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
vue頁面中使用getElementsByClassName無法獲取元素的解決
這篇文章主要介紹了vue頁面中使用getElementsByClassName無法獲取元素的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要給大家介紹了Vue.js實戰(zhàn)之Vuex的入門教程，文中介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要介紹了VUE兄弟組件傳值操作,結合實例形式分析了VUE兄弟組件傳值操作的原理、步驟、實現方法及相關注意事項,需要的朋友可以參考下2019-10-10