vuex state 触发组件里面的函数

Question

问题

一个页面上有多个video标签，然后通过vuex来控制当前播放的video，想要的效果就是一次只能播放一个video，比如页面上有个A,B,C三个video，然后当A在播放的时候，点击B播放，然后A需要停止，然后点击C播放的时候，B需要停止

然后我现在的一个思路就是vuex.有一个属性，currentVideo，这个属性的变化，会让所有video组件感知到，如果是自己就播放，如果不是，那么就暂停；在组件里面有一个函数来控制当前视频的播放

想请问下，在组件里面怎么能监听到vuex里面的state的变化呢

或者对于这个问题还有没有其它的思路

Answer 1

watch currentVideo 变化即可。

个人偏向的方式是在 state 里维护一个 video 的列表，把控制播放的逻辑放在 Mutations 里，这样想让哪个播放就 commit('PLAY_VID', {id:'xxx'})，操作起来不容易出错。

Answer 2

我的想法是用getter来获取当前正在播放（或应该播放的video标识）

Answer 3

state 里的数据本来就是响应式的，你也可以使用 computed 依赖 state 来得出一个变量，也可以直接 watch state