Vue 组件之间的控制

Question

有2个组件，A组件和B组件，A组件中有一个播放器，并且添加了播放器的播放和停止事件，要求B组件的多个按钮点击也能让A组件的播放器播放，而且是每点击一个就会暂停上一个，立刻播放下一个

这个是A组件

 <img :src="start" alt="#" @click="changestart" class="seta">


 changestart() {
      if (this.start == "../../static/pic/start.png") {
        this.start = "../../static/pic/stop.png";
        this.$refs.player.play();
      } else {
        this.start = "../../static/pic/start.png";
        this.$refs.player.pause();
      }

这个是b组件，也添加了click事件，还有其他功能
<li v-for="(songNamelist,songIndex) in songName" v-bind:key="songIndex" class="songlist" @click="songChoose(songIndex,'/play')">

    songChoose(songIndex,z) {
      this.$router.replace(z)
      this.isresearch = false;
      this.ishow=false;
      this.keyword='';
    },

有一个思路，因为用的是Vuex，点击B组件按钮用mutation提交修改state.xxx=true，A组件发现state的参数xxx=true然后执行播放，但是播放的函数不知道写在哪里

这是播放的函数
this.$refs.player.play()

写到created里面不行，因为A没有重新加载，写到A的methods里面不知道该用什么来触发，watch也试过，xxx不知道该在哪里设置为false，请给一个解决方法或一个思路，非常感谢。

Answer 1

给你参考下我之前用过的方法吧：
A组件

    computed: {
        changeXxx(){
            return this.$store.state.xxx; 
        },
    },
    watch: {
        changeXxx(val){
            // 开始播放
            this.$refs.player.play();

            // 设置xxx为false
            this.$store.commit("updateXXX",false);
        },    
    },

vuex

updateXXX(state,val){
      state.xxx = val;
},

Answer 2

写一个自定义的events处理一下就行了，订阅者模式，A初始化的时候通过events监听某个事件，B通过events发起事件。

按理说watch应该是可以的，当改变的时候调用一下自身的methods来切换状态，顺便提交一个mutation把xxx改回来就行

Answer 3

其实就是组件的通讯两种方法

1. event bus
2. vuex