NuxtでPubSubを実装する方法

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

目次

1. Vue.jsでのPubSub
2. $nuxtオブジェクトを使う

Vue.jsでのPubSub

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

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

1
2
3
4
5
6
7
8
9
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を利用できるので、独自に用意する必要がありませんでした。

1
2
3
4
5
6
7
8
9
10
export default {
  mounted() {
    this.$nuxt.$on('sendMessage', (msg) => {
      console.log(msg) // Hello
    })
  }
}

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

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