イベント

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

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 は '私たちのアプリへようこそ！' になります

型の拡張

Nuxtが提供するフックの型を拡張することができます。

import { HookResult } from "@nuxt/schema";

declare module '#app' {
  interface RuntimeNuxtHooks {
    'your-nuxt-runtime-hook': () => HookResult
  }
  interface NuxtHooks {
    'your-nuxt-hook': () => HookResult
  }
}

declare module 'nitropack' {
  interface NitroRuntimeHooks {
    'your-nitro-hook': () => void;
  }
}