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