快捷導(dǎo)航

Vue?狀態(tài)存儲(chǔ)和會(huì)話存儲(chǔ)同步清空問題解決方案(最新推薦)

更新時(shí)間：2024年12月16日 14:33:15 作者：前端糕手

文章介紹了在使用Pinia定義的useHeaderTabStore中,tab狀態(tài)通過會(huì)話存儲(chǔ)初始化但未在退出登錄時(shí)同步清空的問題,通過在PiniaStore中定義清空tab的函數(shù),并在退出登錄時(shí)調(diào)用該函數(shù),可以確保狀態(tài)和會(huì)話存儲(chǔ)同步清空,避免內(nèi)存中殘留舊數(shù)據(jù),感興趣的朋友一起看看吧

問題描述：

在使用 Pinia 定義的 useHeaderTabStore中，tab狀態(tài)是通過會(huì)話存儲(chǔ)（sessionStorage）初始化的。然而在退出登錄時(shí)，即使清空了會(huì)話存儲(chǔ)中的 tab數(shù)據(jù)，重新登錄后頁面上的 tab數(shù)據(jù)仍然存在，這是因?yàn)?Pinia 狀態(tài)在內(nèi)存中仍然保留了之前的數(shù)據(jù)，未重新獲取會(huì)話存儲(chǔ)的數(shù)據(jù)。

解決方法：

在 Pinia Store 中定義一個(gè)清空 tab 的函數(shù)：
- 清空內(nèi)存中 tab的狀態(tài)變量。
- 同時(shí)清空會(huì)話存儲(chǔ)中的 tab數(shù)據(jù)。
在退出登錄函數(shù)中調(diào)用該清空函數(shù)：
- 這樣可以確保狀態(tài)和會(huì)話存儲(chǔ)同步清空

狀態(tài)存儲(chǔ)文件：

const useHeaderTabStore=defineStore('headerTab',{
state:():any=>({
tab:sessionStorage.getItem('tab')?JSON.parse(sessionStorage.getItem('tab')||'{}'): [],
currentTab:{}
}),
getters:{
  getTab():any[]{
return this.tab
  }
},
actions:{
//添加的清除tab的函數(shù)
clearTab(){
  this.tab=[]
  sessionStorage.removeItem('tab');
},
//把tab通過sessionStorage存儲(chǔ)起來然后賦值給tab變量
setTab(val:any){
    console.log(val,'headertab')
    this.currentTab=val
    const exists = this.tab.some((item:any) => item.path === val.path)
    if (!exists) {
      console.log('Adding new tab');
      this.tab.push(val);
      sessionStorage.setItem('tab',JSON.stringify(this.tab))
    } else {
      console.log('Tab already exists');
    }
  }
}
})
export default useHeaderTabStore

退出登錄函數(shù)

//一開始的問題函數(shù)
  function logout() {
  router.replace('/homePage');
 sessionStorage.removeItem('tab');
}
//修改成調(diào)用清除函數(shù)
function logout() {
  const headerTabStore = useHeaderTabStore(); // 引用 Pinia Store
  headerTabStore.clearTab(); // 調(diào)用清空函數(shù)
  router.replace('/homePage'); // 跳轉(zhuǎn)到登錄頁或首頁
}

此時(shí)再進(jìn)行登錄之后，tab數(shù)據(jù)任然存在頁面上沒有清空，但是瀏覽器存儲(chǔ)已經(jīng)被清空

此時(shí)可以想到狀態(tài)存儲(chǔ)的tab變量在登錄之后未重新獲取，而是保存之前的數(shù)據(jù)

總結(jié)

問題根因：

狀態(tài)存儲(chǔ)（Pinia）和會(huì)話存儲(chǔ)（sessionStorage）未同步清空，導(dǎo)致 tab數(shù)據(jù)在內(nèi)存中仍然存在。

解決方法：

在 Pinia Store 中新增 clearTab 函數(shù)，同時(shí)清空內(nèi)存狀態(tài)和會(huì)話存儲(chǔ)。
在退出登錄時(shí)調(diào)用該清空函數(shù)，確保狀態(tài)同步清空。

代碼示例：

Pinia Store 定義清空函數(shù)。
在退出登錄時(shí)調(diào)用clearTab ，同步狀態(tài)和存儲(chǔ)的清空操作。

效果：

每次退出登錄后，tab狀態(tài)和會(huì)話存儲(chǔ)中的數(shù)據(jù)都會(huì)完全清空，重新登錄后數(shù)據(jù)重新初始化。

到此這篇關(guān)于Vue 狀態(tài)存儲(chǔ)和會(huì)話存儲(chǔ)同步清空問題解決方案的文章就介紹到這了,更多相關(guān)Vue 狀態(tài)存儲(chǔ)和會(huì)話存儲(chǔ)同步清空問題解決方案內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: