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

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

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

問題描述：

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

解決方法：

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

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

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存儲起來然后賦值給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'); // 跳轉到登錄頁或首頁
}

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

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