イベント

イベントを使用することは、アプリケーションを疎結合にし、コードの異なる部分間でより柔軟でモジュール化された通信を可能にする素晴らしい方法です。イベントには、互いに依存しない複数のリスナーを持たせることができます。例えば、注文が発送されるたびにユーザーにメールを送信したい場合、注文処理コードをメールコードに結びつける代わりに、リスナーが受け取ってメールを送信するためのイベントを発行することができます。

Nuxtのイベントシステムは、Nuxtのフックシステムを支えるのと同じライブラリである unjs/hookable によって動作しています。

イベントとリスナーの作成

hook メソッドを使用して、独自のカスタムイベントを作成できます：

const nuxtApp = useNuxtApp()

nuxtApp.hook('app:user:registered', payload => {
  console.log('新しいユーザーが登録されました！', 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 = '私たちのアプリへようこそ！'
})

const payload = {
  id: 1,
  name: 'John Doe',
}

await nuxtApp.callHook('app:user:registered', {
  id: 1,
  name: 'John Doe',
})

// payload.message は '私たちのアプリへようこそ！' になります