nuxt logo

Nuxt.js (中文)

NuxtApp

在 Nuxt 中,您可以在 composables、组件和插件中访问运行时应用程序上下文。

在 Nuxt 中,您可以在 composables、组件和插件中访问运行时应用程序上下文。

另请参阅 v2.nuxt.com > docs > internals-glossary > context

Nuxt 应用接口

另请参阅 guide > going-further > internals#the-nuxtapp-interface

Nuxt 上下文

许多内置和用户自定义的 composables 和实用工具可能需要访问 Nuxt 实例。这并不是在应用程序的每个地方都存在,因为每次请求都会创建一个新的实例。

目前,Nuxt 上下文仅在 插件Nuxt 钩子Nuxt 中间件(如果用 defineNuxtRouteMiddleware 包装)和 setup 函数(在页面和组件中)中可访问。

如果在没有上下文访问的情况下调用 composable,您可能会收到错误,指出“需要访问 Nuxt 实例的 composable 被调用在插件、Nuxt 钩子、Nuxt 中间件或 Vue setup 函数之外。”在这种情况下,您还可以通过使用 nuxtApp.runWithContext 在此上下文中显式调用函数。

访问 NuxtApp

在 composables、插件和组件中,您可以使用 useNuxtApp() 访问 nuxtApp

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

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

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

另请参阅 guide > directory-structure > plugins

提供助手

您可以提供助手,以便在所有 composables 和应用程序中使用。这通常发生在 Nuxt 插件中。

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

console.log(nuxtApp.$hello('name')) // 输出 "Hello name!"
另请参阅 guide > directory-structure > plugins#providing-helpers 另请参阅 v2.nuxt.com > docs > directory-structure > plugins