Vue 状态存储和会话存储同步清空问题解决方案(最新推荐)

const useHeaderTabStore=defineStore('headerTab',{
state:():any=>({
tab:sessionStorage.getItem('tab')?JSON.parse(sessionStorage.getItem('tab')||'{}'): [],
currentTab:{}
}),
getters:{
  getTab():any[]{
return this.tab
  }
},
actions:{
//添加的清除tab的函数
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

//一开始的问题函数
  function logout() {
  router.replace('/homePage');
 sessionStorage.removeItem('tab');
}
//修改成调用清除函数
function logout() {
  const headerTabStore = useHeaderTabStore(); // 引用 Pinia Store
  headerTabStore.clearTab(); // 调用清空函数
  router.replace('/homePage'); // 跳转到登录页或首页
}