NuxtApp

在 Nuxt3，你可以在组合函数、组件以及插件中获取运行时app上下文。

在 Nuxt2，这被称为 Nuxt上下文。

获取 NuxtApp

在组合函数、组件以及插件中通过 useNuxtApp 访问 nuxtApp 实例。

  1. import { useNuxtApp } from '#app'
  3. function useMyComposable () {
  4.   const nuxtApp = useNuxtApp()
  5.   // 获取运行时nuxtApp实例
  6. }

为了便利，插件也可以接收 nuxtApp 作为第一个参数。查看更多关于插件的内容。

::: info 注意： 👉 useNuxtApp (在服务端) 仅仅能在 setup 期间，或是在 Nuxt 插件中、生命周期钩子函数中才能被使用。 :::

提供助手

您可以为所有组合函数以及所有应用提供助手，这通常出现在一个Nuxt插件里。

  1. const nuxtApp = useNuxtApp()
  2. nuxtApp.provide('hello', (name) => `Hello ${name}!`)
  4. console.log(nuxtApp.$hello('name')) // 打印 "Hello name!"

在Nuxt2插件里,这被定义为注入方法。

::: tip 👉 通过返回一个带有提供秘钥的对象来注入帮助。详细请查阅插件文档 :::

NuxtApp 接口 (高级)

nuxtApp具有以下属性:

(注意:这是一个内部接口，在稳定版本发布之前，一些属性可能随时改变)

  1. const nuxtApp = {
  2.   vueApp, // 全局Vue应用: https://v3.vuejs.org/api/application-api.html
  4.   // 这些是供开发者调用，并添加运行时NuxtApp实例上的钩子
  5.   // https://github.com/nuxt/framework/blob/main/packages/nuxt3/src/app/nuxt.ts#L18
  6.   hooks,
  7.   hook,
  8.   callHook,
  10.   // 仅在服务端使用
  11.   ssrContext: {
  12.     url,
  13.     req,
  14.     res,
  15.     runtimeConfig,
  16.     noSSR,
  17.   },
  19.   // 在从服务端传递到客户端时，这将会被序列化
  20.   payload: {
  21.     serverRendered: true,
  22.     data: {},
  23.     state: {}
  24.   }
  26.   provide: (name: string, value: any) => void
  27. }

通过查看源代码，获取更多信息。