跳到主要内容

NuxtApp

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

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

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

Nuxt App 接口

跳转到 NuxtApp 接口文档。

Nuxt 上下文

许多内置和用户自定义的的组合式函数与工具函数,可能需要访问 Nuxt 实例。这在你的应用中并非处处都可用,因为每次请求都会创建一个全新的实例。

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

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

访问 NuxtApp

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

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

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

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

提供辅助函数

你可以提供能在所有组合式函数和应用中通用的辅助函数。这通常发生在 Nuxt 插件中。

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

console.log(nuxtApp.$hello('name')) // 打印 "Hello name!"

在插件中,可以通过返回一个带有 provide 键的对象来注入辅助函数。

在 Nuxt 2 插件中,这被称为 inject 函数(注入函数)