Lzh on GitHub

NuxtApp

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

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

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

Nuxt App 接口

跳转到 NuxtApp 接口文档。

Nuxt 上下文

许多内置的和用户自定义的 composables 和实用程序可能需要访问 Nuxt 实例。这并非在你的应用程序的任何地方都存在,因为每个请求都会创建一个新的实例。

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

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

访问 NuxtApp

在 composables、插件和组件中,你可以使用 useNuxtApp() 访问 nuxtApp

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

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

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

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

提供助手函数

你可以提供可在所有 composables 和应用程序中使用的助手函数。这通常发生在 Nuxt 插件中。

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

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