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);
   }
}