创建自定义事件

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

使用事件是一种很好的方式来解耦你的应用，并允许代码的不同部分之间进行更灵活、模块化的通信。事件可以有多个互相不依赖的监听器。例如，你希望在每次订单发货时向用户发送一封邮件。你可以发出一个事件，让一个监听器接收并用它来派发邮件，而不是将你的订单处理代码与邮件代码耦合在一起。

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: 'John Doe',
})

你也可以使用 payload 对象来实现发送方与监听器之间的双向通信。由于 payload 是通过引用传递的，监听器可以修改它来向发送方回传数据。

const nuxtApp = useNuxtApp()

nuxtApp.hook('app:user:registered', (payload) => {
  payload.message = '欢迎使用我们的应用！'
})

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

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

// payload.message 将会是 '欢迎使用我们的应用！'

你可以使用 Nuxt DevTools 的 Hooks 面板检查所有事件。

了解更多关于 Nuxt 内置钩子以及如何扩展它们 :::