事件
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 鉤子面板檢查所有事件。