NuxtApp

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

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

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

Nuxt 应用程序接口

跳转到 NuxtApp 接口文档。

Nuxt 上下文

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

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

如果在没有访问上下文的情况下调用组合函数,您可能会收到一条错误信息,说明 '要求访问 Nuxt 实例的组合函数在插件、Nuxt 钩子、Nuxt 中间件或 Vue 设置函数之外被调用。'在这种情况下,您还可以通过使用 nuxtApp.runWithContext 显式地在此上下文中调用函数。

访问 NuxtApp

在组合函数、插件和组件中,您可以使用 useNuxtApp() 访问 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')) // 输出 "Hello name!"
可以通过在插件中返回带有 provide 键的对象来注入助手函数。
在 Nuxt 2 插件中,这被称为 注入函数