События

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

Система событий Nuxt построена на unjs/hookable — той же библиотеке, что и система хуков Nuxt.

Создание событий и слушателей

Свои события регистрируются методом 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: 'Иван Иванов',
})

Объект payload можно использовать для двусторонней связи между эмиттером и слушателями: он передаётся по ссылке, слушатель может его изменить, и эмиттер увидит результат.

const nuxtApp = useNuxtApp()

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

const payload = {
  id: 1,
  name: 'Иван Иванов',
}

await nuxtApp.callHook('app:user:registered', {
  id: 1,
  name: 'Иван Иванов',
})

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