通过 100+ 条技巧的集合学习 Nuxt!

NuxtApp

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

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

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

Nuxt 应用程序接口

跳转至 NuxtApp 接口文档。

Nuxt 上下文

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

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

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

访问 NuxtApp

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

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

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

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

请在 文档 > 指南 > 目录结构 > 插件中了解更多信息。

提供助手

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

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

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