Собственные события

События помогают развязать части приложения и организовать обмен между ними. У одного события может быть несколько независимых подписчиков. Например, при отправке заказа можно вызвать событие, а подписчик отправит письмо — код заказа не будет зависеть от кода почты.

Система событий 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 передаётся по ссылке — подписчик может изменить его и вернуть данные инициатору (двусторонняя связь).

const nuxtApp = useNuxtApp()

nuxtApp.hook('app:user:registered', (payload) => {
  payload.message = 'Добро пожаловать!'
})

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

// payload.message будет 'Добро пожаловать!'