NuxtApp

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

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

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

Nuxt 应用接口

查看 NuxtApp 接口文档。

Nuxt 上下文

许多内置或用户创建的组合式函数和实用工具可能需要访问 Nuxt 实例。但 Nuxt 实例并非在应用的每个地方都存在,因为每个请求都会创建一个新的实例。

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

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

访问 NuxtApp

在组合式函数、插件和组件中,你可以通过 useNuxtApp() 访问 nuxtApp

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

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

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

阅读更多 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 的插件中,这被称为 注入函数