v3.17
GitHub

事件

Nuxt 提供了一个强大的事件系统，支持可挂钩的功能。

事件

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

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

扩展类型

您可以扩展 Nuxt 提供的钩子类型。

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

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

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