イベント
Nuxtは、hookableによって強化された強力なイベントシステムを提供します。
イベント
イベントを使用することは、アプリケーションを疎結合にし、コードの異なる部分間のより柔軟でモジュール式の通信を可能にする素晴らしい方法です。イベントは、互いに依存しない複数のリスナーを持つことができます。例えば、注文が発送されるたびにユーザーにメールを送信したい場合があります。注文処理コードとメールコードを結合する代わりに、リスナーが受信してメールをディスパッチするために使用できるイベントを発行できます。
Nuxtイベントシステムは、unjs/hookableによって強化されています。これは、Nuxtフックシステムを強化するのと同じライブラリです。
イベントとリスナーの作成
hook メソッドを使用して、独自のカスタムイベントを作成できます。
const nuxtApp = useNuxtApp()
nuxtApp.hook('app:user:registered', (payload) => {
console.log('A new user has registered!', payload)
})
イベントを発行し、リスナーに通知するには、callHook を使用します。
const nuxtApp = useNuxtApp()
await nuxtApp.callHook('app:user:registered', {
id: 1,
name: 'John Doe',
})
ペイロードオブジェクトを使用して、エミッターとリスナー間の双方向通信を有効にすることもできます。ペイロードは参照渡しされるため、リスナーはそれを変更してエミッターにデータを送り返すことができます。
const nuxtApp = useNuxtApp()
nuxtApp.hook('app:user:registered', (payload) => {
payload.message = 'Welcome to our app!'
})
const payload = {
id: 1,
name: 'John Doe',
}
await nuxtApp.callHook('app:user:registered', {
id: 1,
name: 'John Doe',
})
// payload.message will be 'Welcome to our app!'
Nuxt DevTools の Hooks パネルを使用して、すべてのイベントを検査できます。