NuxtでPubSubを実装する方法

Nuxtを使っていてグローバルなイベントをPubSubしたいという機会がありました。

Vue.jsでのPubSub

Vue.jsでは下記のように$onと$emitが用意されています。

インスタンスの$onと$emitを使うことでEventEmitterのようなライブラリを使うことなく、イベントの発行と購読を行うことができます。

import Vue from 'vue'

const app = new Vue()

app.$on('sendMessage', (msg) => {
  console.log(msg) // Hello
})

app.$emit('sendMessage', 'Hello')

Nuxtで使う時にインスタンスの部分を外部ファイル化したりプラグインで各コンポーネントからアクセスできるようにすれば解決。

そのことを最初に考えたのですがNuxtではそんな必要がありませんでした。

$nuxtオブジェクトを使う

Nuxtでは各コンポーネントのthisに$nuxtというオブジェクトがあります。

この$nuxtで$onと$emitを利用することができるので、独自に用意する必要がありませんでした。

export default {
  mounted() {
    this.$nuxt.$on('sendMessage', (msg) => {
      console.log(msg) // Hello
    })
  }
}

// 任意のコンポーネント内
this.$nuxt.emit('sendMessage', 'Hello')

Nuxtはやりたいと思うことがサクッとできて実装に集中できるのがやっぱりいいですね。

コウジ
Vue.jsが好きなフリーランスのフロントエンドエンジニアです。 フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発