Nuxt App

在 Nuxt 3 中,您可以在组合式、组件和插件中访问运行时 app 上下文。

在 Nuxt 3 中,您可以在组合式、组件和插件中访问运行时 app 上下文。

在 Nuxt 2 中,这被称为 Nuxt 上下文

Nuxt App 接口

跳过 NuxtApp 接口文档。

The Nuxt 上下文

许多组合式和实用程序,无论是内置的还是用户制作的,都可能需要访问 Nuxt 实例。这并不存在于你的应用程序的每个地方,因为每次请求都会创建一个新鲜的实例。

目前,Nuxt 上下文只能在 pluginsNuxt 钩子Nuxt 中间件,以及 setup 函数(在页面和组件中)中访问。

如果在一个没有访问上下文的组合式中调用,您可能会得到一个错误,指出“一个组合式需要访问 Nuxt 实例,它被调用在插件、Nuxt 钩子、Nuxt 中间件或 Vue 设置函数之外”。在这种情况下,您也可以通过使用 nuxtApp.runWithContext 明确调用这个上下文中的函数。

访问 NuxtApp

在组合式、插件和组件中,您可以使用 [useNuxtApp()](/docs/api/composables/use-nuxt-app)访问 nuxtApp

composables/useMyComposable.ts
export function useMyComposable () {
  const nuxtApp = useNuxtApp()
  // 访问运行时 Nuxt 应用实例
}

如果您的组合式并不总是需要 nuxtApp 或者您只是想检查它是否存在,因为 useNuxtApp 会抛出异常,您可以使用 tryUseNuxtApp 代替。

插件也方便地接收 nuxtApp 作为第一个参数。

Read more in Docs > Guide > Directory Structure > Plugins.

提供助手

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

const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => `Hello ${name}!`)

console.log(nuxtApp.$hello('name')) // Prints "Hello name!"
通过在插件中返回一个带有 provide 键的对象,可以注入辅助工具。
在 Nuxt 2 插件中,这被称为 注入函数