😀

NuxtでPubSubを実装する方法

2018/11/19に公開約700字

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はやりたいと思うことがサクッとできて実装に集中できるのがやっぱりいいですね。

Discussion

ログインするとコメントできます