v3
GitHub

事件

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

您还可以使用载荷对象来实现发射器与监听器之间的双向通信。由于载荷是通过引用传递的，监听器可以修改它以向发射器返回数据。

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 提供的钩子类型。

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;
  }
}