global-event-bus 创建全局事件总线

import Vue from 'vue';
export const EventBus = new Vue();

 

界面使用：

<template>
  <div>数据
    <div class="pleeease-click-me" @click="emitGlobalClickEvent()">啦啦啦</div>
  </div>
</template>

<script>
  // Import the EventBus we just created.
  import { EventBus } from '../vuex/event-bus.js';

  export default {
    data(){
      return {
        clickCount: 0
      }
    },
    methods: {
      emitGlobalClickEvent() {
        this.clickCount++;
        // Send the event on a channel (i-got-clicked) with a payload (the click count.)
        EventBus.$emit('i-got-clicked', this.clickCount);
      }
    }
  }
</script>

<style scoped>

</style>

 

另一个监听：

<template>
  <div>列表 {{count}}
    <button @click="$store.commit('add')">点击</button>
    <button @click="add()">页面点击</button>
    <p>{{x}}</p>
  </div>
</template>

<script>
  // Import the EventBus.
  import { EventBus } from '../vuex/event-bus.js';
    export default {
        name: "list",
      data(){
          return{
            x: ""
          }
      },
      created(){
        // Listen for the i-got-clicked event and its payload.
        EventBus.$on('i-got-clicked', clickCount => {
          console.log(222222)
        });
      },
      mounted(){
      },
      computed:{
        count:function(){
          return this.$store.state.count // 读取vuex的值
        }
      },
      methods: {
        add(){
          this.$store.dispatch("add")
        }
      }
    }
</script>

<style scoped>

</style>