事件
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 的 Hooks 面板来检查所有事件。