NuxtApp

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

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

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

Nuxt App 接口

跳转到 NuxtApp 接口文档。

Nuxt 上下文

许多组合式函数和工具(无论是内置的还是用户编写的)可能需要访问 Nuxt 实例。该实例并不存在于应用的所有位置,因为每个请求都会创建一个新的实例。

目前,Nuxt 上下文仅可在 pluginsNuxt hooksNuxt middleware(如果用 defineNuxtRouteMiddleware 包裹),以及页面和组件中的 setup 函数 中访问。

如果在没有上下文访问的情况下调用组合式函数,您可能会收到一条错误,提示 'A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.'。在这种情况下,您也可以使用 nuxtApp.runWithContext 显式在该上下文中调用函数。

访问 NuxtApp

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

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

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

插件出于方便也会将 nuxtApp 作为第一个参数传入。

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

提供帮助函数

您可以提供帮助函数以便在所有组合式函数和整个应用中使用。这通常在 Nuxt 插件中完成。

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

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