vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue 状态存储和会话存储同步清空

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

作者:前端糕手

文章介绍了在使用Pinia定义的useHeaderTabStore中,tab状态通过会话存储初始化但未在退出登录时同步清空的问题,通过在PiniaStore中定义清空tab的函数,并在退出登录时调用该函数,可以确保状态和会话存储同步清空,避免内存中残留旧数据,感兴趣的朋友一起看看吧

问题描述:

   在使用 Pinia 定义的 useHeaderTabStore中,tab状态是通过会话存储(sessionStorage)初始化的。然而在退出登录时,即使清空了会话存储中的 tab数据,重新登录后页面上的 tab数据仍然存在,这是因为 Pinia 状态在内存中仍然保留了之前的数据,未重新获取会话存储的数据。

解决方法:

状态存储文件:

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'); // 跳转到登录页或首页
}

此时再进行登录之后,tab数据任然存在页面上没有清空,但是浏览器存储已经被清空

此时可以想到状态存储的tab变量在登录之后未重新获取,而是保存之前的数据

总结

问题根因

解决方法

代码示例

效果

到此这篇关于Vue 状态存储和会话存储同步清空问题解决方案的文章就介绍到这了,更多相关Vue 状态存储和会话存储同步清空问题解决方案内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文