Nuxt 3 已于 31 July 2026 结束生命周期
此版本将不再接收错误修复或安全补丁。 升级到 Nuxt 4 或获取 HeroDevs 提供的延长支持
NuxtApp
在 Nuxt 中,您可以在组合函数、组件和插件中访问运行时应用上下文。
Maschinelle Übersetzung ·0 % geprüft
在 Nuxt 中,您可以在组合函数、组件和插件中访问运行时应用上下文。
Nuxt App 接口
Nuxt 上下文
许多组合函数和工具,无论是内置还是用户自定义,可能需要访问 Nuxt 实例。这个实例并不存在于应用的每个地方,因为每个请求都会创建一个新的实例。
目前,Nuxt 上下文只能在 插件、Nuxt 钩子、Nuxt 中间件(如果使用 defineNuxtRouteMiddleware 包装)和设置函数(在页面和组件中)中访问。
如果在无法访问上下文的情况下调用组合函数,您可能会收到一条错误消息:“需要访问 Nuxt 实例的组合函数是在插件、Nuxt 钩子、Nuxt 中间件或 Vue 设置函数之外调用的。”在这种情况下,您也可以使用 nuxtApp.runWithContext 在此上下文中显式调用函数。
访问 NuxtApp
在组合函数、插件和组件中,您可以通过 useNuxtApp() 访问 nuxtApp:
composables/useMyComposable.ts
export function useMyComposable () {
const nuxtApp = useNuxtApp()
// 访问运行时 nuxt 应用实例
}如果您的组合函数不总是需要 nuxtApp,或者您只想检查它是否存在,因为 useNuxtApp 会抛出异常,则可以改用 tryUseNuxtApp。
插件中也会将 nuxtApp 作为第一个参数传入,使用起来更加方便。
提供辅助方法
您可以提供辅助方法,使其在所有组合函数和应用中都可用。这通常在 Nuxt 插件中完成。
const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', name => `Hello ${name}!`)
console.log(nuxtApp.$hello('name')) // 输出 "Hello name!"