이벤트를 사용하는 것은 애플리케이션의 결합도를 낮추고 코드의 서로 다른 부분 간에 더 유연하고 모듈식으로 통신할 수 있게 하는 훌륭한 방법입니다. 이벤트는 서로에게 의존하지 않는 여러 리스너를 가질 수 있습니다. 예를 들어, 주문이 발송될 때마다 사용자에게 이메일을 보내고 싶을 수 있습니다. 주문 처리 코드를 이메일 코드와 결합하는 대신, 리스너가 수신하여 이메일을 발송하는 데 사용할 수 있는 이벤트를 발생시킬 수 있습니다.
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는 '우리 앱에 오신 것을 환영합니다!'가 됩니다.