soybeanjs / soybean-admin

A clean, elegant, beautiful and powerful admin template, based on Vue3, Vite5, TypeScript, Pinia, NaiveUI and UnoCSS. 一个清新优雅、高颜值且功能强大的后台管理模板,基于最新的前端技术栈,包括 Vue3, Vite5, TypeScript, Pinia, NaiveUI 和 UnoCSS。
https://soybeanjs.cn
MIT License
10.2k stars 1.83k forks source link

[Bug]: `setTabLabel`多个页面异步使用会导致页面间的标题错位混乱 #642

Closed NHZEX closed 1 month ago

NHZEX commented 1 month ago

软件版本

1.3.7

运行环境

Windows (64)

运行架构

None

重现步骤

存在两个页面:

当两个页面都打开:且B的响应没返回前切换到A,那B的标题会更新到A中。原因是useTabStore中的setTabLabel默认依赖activeTabId,不是并发安全的。

考虑实施每个页面注入独立的tab的上下文,类似路由上下文,让tab操作更安全简单。

期望的结果是什么?

tab上下文独立管理,或针对当前有个更好的方案,如何获取每个页面实例自己的tabId

实际的结果是什么?

默认使用下容易受到并发导致错误更改。

日志记录(可选)

No response

补充说明(可选)

No response

honghuangdc commented 1 month ago

tab store里面有个findTabByRouteName函数,可以根据路由名称获取到tab信息 setTabLabel的第二个参数就是指定的tab id

NHZEX commented 1 month ago

tab store里面有个findTabByRouteName函数,可以根据路由名称获取到tab信息 setTabLabel的第二个参数就是指定的tab id

路由名称转换也不可靠,使用参数路由多开后就无法准确定位了。 还是提供一个tab上下文注入进去更可靠了,后续使用也更加简便。类似路由实例那种。

honghuangdc commented 1 month ago

看了下你实现的方案存在的问题:在页面B执行setTabLabel时,先获取到当前的tab Id,那么就已经确定了tab了,而不是等切换到了其他页面后再获取tab id

honghuangdc commented 1 month ago

参考一下tab store里面的getTabByRoute函数,就清楚tab id是怎么获取到的