Lzh on GitHub

Events

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

Events

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

Nuxt 事件系统由 unjs/hookable 提供支持，该库与 Nuxt hooks 系统所使用的库相同。

创建事件和监听器

你可以使用 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 面板检查所有事件。.

扩充类型

你可以扩充 Nuxt 提供的 hooks 的类型。

import { HookResult } from "@nuxt/schema";

declare module '#app' {
  interface RuntimeNuxtHooks {
    'your-nuxt-runtime-hook': () => HookResult
  }
  interface NuxtHooks {
    'your-nuxt-hook': () => HookResult
  }
}

declare module 'nitropack' {
  interface NitroRuntimeHooks {
    'your-nitro-hook': () => void;
  }
}