NuxtApp

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

Maschinelle Übersetzung ·0 % geprüft

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

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

Nuxt App 接口

跳转到 NuxtApp 接口文档。

Nuxt 上下文

许多组合式函数和工具(无论是内置的还是用户编写的)可能需要访问 Nuxt 实例。该实例并不存在于应用的所有位置,因为每个请求都会创建一个新的实例。

目前,只有在 插件、Nuxt 钩子、Nuxt 中间件(如果使用 defineNuxtRouteMiddleware 包装)和设置函数(在页面和组件中)中才能访问 Nuxt 上下文。

如果在无法访问上下文的情况下调用组合式函数,您可能会收到错误提示:“需要访问 Nuxt 实例的组合式函数在插件、Nuxt 钩子、Nuxt 中间件或 Vue 设置函数之外被调用。”在这种情况下,您也可以使用 nuxtApp.runWithContext 在此上下文中显式调用函数。

访问 NuxtApp

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

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

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

插件出于方便也会将 nuxtApp 作为第一个参数传入。

Weitere Informationen findest du unter Docs > Directory Structure > App > Plugins.

提供帮助函数

您可以提供帮助函数以便在所有组合式函数和整个应用中使用。这通常在 Nuxt 插件中完成。

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

console.log(nuxtApp.$hello('name')) // 打印 "Hello name!"
您可以在插件中返回包含 provide 键的对象来注入帮助函数。
在 Nuxt 2 的插件中,这被称为 inject 函数。