什么？！B站竟然有功能Bug，成功排查解决.

今天在B站上刷一些技术视频时，碰到了一个小小的功能问题。趁着摸鱼的功夫我们来去看上一看吧！

发现问题

废话不多说，直接上图

问题就是我在当前视频快要播放完成的时候，觉得博主讲的不错，于是就准备收藏一下。在我点击收藏按钮后弹框出来，视频在这时播放完成了而在右侧的视频列表自动播放了下一个视频，因为B站客户端是使用Vue框架设计的，所以在组件重新渲染之后弹框并没有消失。在我点击确认收藏之后，收藏的确是新播放视频的Id，这样就造成很多困扰，我需要取消当前收藏，再回退到上一个视频再次点击收藏.

这显然是不合理的，那么有没有办法解决这个问题呢？简单排查一下就发现问题所在.

既然弹框不受组件重新渲染影响，那么明显就是由全局状态去控制的，显然和组件内状态没有任何关系。我们发现在地址栏/video/之后有一项Id值，后面携带的一些参数应该是用来对视频进行分类的，那么这个弹框点击确认之后明显就是取到Location之中的Id值然后去发起请求.

解决问题

既然弹框组件是由全局内的状态所控制，并且取location内的参数，显然是不能够直接往Modal组件内传props的，那么该如何使弹框组件获取并保持调用时的状态呢？

—— 比较简单方法就是在点击收藏按钮后，使用Vuex在全局状态中记录当前视频的Id，在点击收藏时使用全局内的这个状态作为参数去发起请求，这样即使组件重新渲染也没有问题.

—— 还有一种方法就是在设计弹框组件的时候，使用pinia进行modal框的全局注册。这样不仅能使各个组件很方便的调用model框，还能统一modal入口，方便管理。并且在调用的时候还可以往Modal组件内传入参数，因为弹框和组件是分离开的架构，所以并不会因为组件的重新渲染而导致弹框的状态更新。还可以提升性能，如果需要更新状态只需重新调用即可。 感兴趣的小伙伴可以去看下这篇文章.

总结

代码总是在不断优化中成长 各位大佬如果有更加简单的解决方法，欢迎来讨论...