이벤트

Nuxt는 hookable로 구동되는 강력한 이벤트 시스템을 제공합니다.

이벤트

이벤트를 사용하는 것은 애플리케이션의 결합도를 낮추고 코드의 다양한 부분 간에 더 유연하고 모듈화된 통신을 가능하게 하는 훌륭한 방법입니다. 이벤트는 서로 의존하지 않는 여러 리스너를 가질 수 있습니다. 예를 들어, 주문이 배송될 때마다 사용자에게 이메일을 보내고 싶을 수 있습니다. 주문 처리 코드를 이메일 코드와 결합하는 대신, 리스너가 수신하여 이메일을 발송할 수 있는 이벤트를 발생시킬 수 있습니다.

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',
})

payload 객체를 사용하여 발생자와 리스너 간의 양방향 통신도 활성화할 수 있습니다. payload는 참조로 전달되기 때문에, 리스너가 이를 수정하여 데이터를 발생자에게 다시 보낼 수 있습니다.

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 DevTools의 Hooks 패널을 사용하여 모든 이벤트를 확인할 수 있습니다.

타입 확장

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;
  }
}