😀
NuxtでPubSubを実装する方法
Nuxtを使っていてグローバルなイベントをPubSubしたいという機会がありました。
Vue.jsでのPubSub
Vue.jsでは下記のように
インスタンスの
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というオブジェクトがあります。
この
export default {
mounted() {
this.$nuxt.$on('sendMessage', (msg) => {
console.log(msg) // Hello
})
}
}
// 任意のコンポーネント内
this.$nuxt.emit('sendMessage', 'Hello')
Nuxtはやりたいと思うことがサクッとできて実装に集中できるのがやっぱりいいですね。
Discussion