Nuxtjs eventbus 插件

Nuxtjs 是 VUE SSR 的框架实现，有时会用到单独的事件处理，在 nuxtjs 可按以下方法处理：

添加 plugins/bus-inject.js 内容如下

import Vue from 'vue'

const bus = {}

bus.install = function (Vue) {
  Vue.prototype.$bus = new Vue()
}

Vue.use(bus)

联合注入

如果需要在context中,Vue实例，甚至可能在Vuex store中，可以使用inject方法
Use inject nuxt function

import Vue from 'vue';

export default (ctx, inject) => {
  const bus = new Vue;
  inject('bus', bus);
};

在 nuxt.config.js 配置插件, 更多信息 https://nuxtjs.org/api/configuration-plugins

module.exports = {
    '~/plugins/bus-inject.js',
    //or use this for browser using only
    {src:'~/plugins/bus-inject.js', ssr: false}
}

组件中触发事件

methods:{
   eventhandler(){
       this.$bus.$emit('name-of-event', 'your-data')
  }
}

组件中接收事件

created () {
    this.$bus.$on('name-of-event', (data) { 
      ... 
   } 
}

采用联合注入方法后

组件中的应用

export default {
  mounted(){
      this.$bus.$on('messageSent', e => console.log(e));
  },
  asyncData({app}){
     //app.$bus available here also
  }
}

Store 中应用

export const state = () => ({
    messages: []
});

export const actions = {
   async sendMessage({commit}){
     const message = (await this.$axios.post('/message', {text: 'hello'})).data;
     commit('pushMessage', message);
     this.$bus.$emit('messageSent');
   }
};

export const mutations = {
   pushMessage(state, message) {
      state.messages.push(message);
      this.$bus.$emit('messagePushed', message);
   }
}