vue.js - vuex state 触发组件里面的函数

问题描述

问 题

问题

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

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

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

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

解决方案

watch currentVideo 变化即可。

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

这篇关于vue.js - vuex state 触发组件里面的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！