NuxtApp

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

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

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

Nuxt 应用程序接口

跳转到 NuxtApp 接口文档。

Nuxt 上下文

许多可组合函数和工具,无论是内置的还是用户创建的,可能都需要访问 Nuxt 实例。这在您的应用程序中并非处处都存在,因为每个请求都会创建一个新的实例。

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

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

访问 NuxtApp

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

app/composables/useMyComposable.ts
export function useMyComposable () {
  const nuxtApp = useNuxtApp()
  // access runtime nuxt app instance
}

如果您的可组合函数并非总是需要 nuxtApp,或者您只是想检查它是否存在,因为 useNuxtApp 会抛出异常,您可以改用 tryUseNuxtApp

为了方便,插件也会将 nuxtApp 作为第一个参数接收。

请在文档 > 4 X > 指南 > 目录结构 > 插件中阅读更多内容。

提供辅助函数

您可以提供辅助函数,以便在所有可组合函数和应用程序中使用。这通常发生在 Nuxt 插件中。

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

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