Eventos

Usar eventos é uma ótima maneira de desacoplar sua aplicação e permitir uma comunicação mais flexível e modular entre diferentes partes do seu código. Eventos podem ter múltiplos ouvintes que não dependem uns dos outros. Por exemplo, você pode querer enviar um e-mail para seu usuário cada vez que um pedido for enviado. Em vez de acoplar seu código de processamento de pedidos ao seu código de e-mail, você pode emitir um evento que um ouvinte pode receber e usar para despachar um e-mail.

O sistema de eventos do Nuxt é impulsionado por unjs/hookable, que é a mesma biblioteca que impulsiona o sistema de hooks do Nuxt.

Criando Eventos e Ouvintes

Você pode criar seus próprios eventos personalizados usando o método hook:

const nuxtApp = useNuxtApp()

nuxtApp.hook('app:user:registered', payload => {
  console.log('Um novo usuário se registrou!', payload)
})

Para emitir um evento e notificar quaisquer ouvintes, use callHook:

const nuxtApp = useNuxtApp()

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

Você também pode usar o objeto payload para habilitar a comunicação bidirecional entre o emissor e os ouvintes. Como o payload é passado por referência, um ouvinte pode modificá-lo para enviar dados de volta ao emissor.

const nuxtApp = useNuxtApp()

nuxtApp.hook('app:user:registered', payload => {
  payload.message = 'Bem-vindo ao nosso aplicativo!'
})

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

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

// payload.message será 'Bem-vindo ao nosso aplicativo!'

Aumentando Tipos

Você pode aumentar os tipos de hooks fornecidos pelo 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;
  }
}