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