事件

Nuxt 提供了一个由 hookable 驱动的强大事件系统。

事件

使用事件是解耦应用程序并允许代码不同部分之间进行更灵活和模块化通信的好方法。事件可以有多个监听器,它们之间相互独立。例如,您可能希望每次订单发货时都向用户发送一封电子邮件。与其将订单处理代码与电子邮件代码耦合,不如发出一个事件,监听器可以接收并使用它来发送电子邮件。

Nuxt 事件系统由unjs/hookable提供支持,该库也为 Nuxt 钩子系统提供支持。

创建事件和监听器

您可以使用 hook 方法创建自己的自定义事件

const nuxtApp = useNuxtApp()

nuxtApp.hook('app:user:registered', (payload) => {
  console.log('A new user has registered!', 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 = 'Welcome to our app!'
})

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

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

// payload.message will be 'Welcome to our app!'
您可以使用 Nuxt DevTools 钩子面板检查所有事件。
了解有关 Nuxt 内置钩子以及如何扩展它们的更多信息