Eventos

Usar eventos es una excelente manera de desacoplar tu aplicación y permitir una comunicación más flexible y modular entre diferentes partes de tu código. Los eventos pueden tener múltiples oyentes que no dependen unos de otros. Por ejemplo, es posible que desees enviar un correo electrónico a tu usuario cada vez que se envíe un pedido. En lugar de acoplar tu código de procesamiento de pedidos a tu código de correo electrónico, puedes emitir un evento que un oyente pueda recibir y usar para enviar un correo electrónico.

El sistema de eventos de Nuxt está impulsado por unjs/hookable, que es la misma biblioteca que impulsa el sistema de hooks de Nuxt.

Creación de Eventos y Oyentes

Puedes crear tus propios eventos personalizados usando el método hook:

const nuxtApp = useNuxtApp()

nuxtApp.hook('app:user:registered', payload => {
  console.log('¡Un nuevo usuario se ha registrado!', payload)
})

Para emitir un evento y notificar a cualquier oyente, usa callHook:

const nuxtApp = useNuxtApp()

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

También puedes usar el objeto payload para habilitar la comunicación bidireccional entre el emisor y los oyentes. Dado que el payload se pasa por referencia, un oyente puede modificarlo para enviar datos de vuelta al emisor.

const nuxtApp = useNuxtApp()

nuxtApp.hook('app:user:registered', payload => {
  payload.message = '¡Bienvenido a nuestra aplicación!'
})

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

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

// payload.message será '¡Bienvenido a nuestra aplicación!'

Aumentar Tipos

Puedes aumentar los tipos de hooks proporcionados por 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;
  }
}