NuxtApp

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

在Nuxt 2中，这被称为Nuxt上下文。

访问 NuxtApp

在可组合物，插件和组件中，您可以使用 useNuxtApp 访问 nuxtApp

import { useNuxtApp } from '#app'
​
function useMyComposable () {
  const nuxtApp = useNuxtApp()
  // access runtime nuxt app instance
}

为了方便起见，插件也接收作为第一个参数。阅读有关插件的更多信息。nuxtApp

👉

useNuxtApp（在服务器端）仅在安装期间工作，在Nuxt插件或生命周期钩子中。

提供帮助

您可以提供可在所有组合和应用程序中使用的帮助程序。这通常发生在Nuxt插件中。

const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => `Hello ${name}!`)
​
console.log(nuxtApp.$hello('name')) // Prints "Hello name!"

在Nuxt 2插件中，这被称为注入函数。

👉

可以通过返回带有键的对象来注入帮助程序。有关详细信息，请参阅插件文档。provide

NuxtApp 界面（高级）

nuxtApp具有以下属性：（注意：这是一个内部接口，某些属性可能会更改，直到稳定版发布）

const nuxtApp = {
  vueApp, // 全局Vue应用程序: https://v3.vuejs.org/api/application-api.html
​
  // 允许您调用和添加运行时NuxtApp钩子
  // https://github.com/nuxt/framework/blob/main/packages/nuxt3/src/app/nuxt.ts#L18
  hooks,
  hook,
  callHook,
​
  // 仅在服务器端可访问
  ssrContext: {
    url,
    req,
    res,
    runtimeConfig,
    noSSR,
  },
​
  // 这将被字符串化并从服务器传递到客户端
  payload: {
    serverRendered: true,
    data: {},
    state: {}
  }
​
  provide: (name: string, value: any) => void
}

\