gxbsst
6/8/2017 - 10:04 AM

Vue 2 Event Bus

Vue 2 Event Bus


<template>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';
import * as types from './../store/action_types';

export default {
  components: { },

  created() {
    this.$bus.$on('test', val => {
      console.log(`This is a(n) ${ val } test`);
    });
    
    this.$bus.$emit('test', 'EventBus');
  },

  computed: {
    ...mapState([  ]),

    ...mapGetters({  }),
  },

  methods: {
    ...mapActions({ }),
  },
}
</script>

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) : (global.Vuex = factory());
}(this, (function() {
  let Vue;

  function install(_Vue) {
    if(Vue) {
      console.error('[EventBus] already installed. Vue.use(EventBus) should be called only once.');

      return;
    }

    Vue = _Vue;

    // auto install in dist mode
    if(typeof window !== 'undefined' && window.Vue) {
      install(window.Vue);
    }

    const EventBus = new Vue();

    // Add to Vue properties by exposing a getter for $bus
    Object.defineProperties(Vue.prototype, {
      $bus: {
        get() {
          return EventBus;
        },
      },
    });
  }

  return {
    install,
  };
})));
'use strict';

import Vue from 'vue';
import store from './store';
import EventBus from './event-bus';

import App from './components/app.vue';

// Add the EventBus plugin
Vue.use(EventBus);

const app = new Vue({
  store,
  render: h => h(App),
});

app.$mount('#app');