通过 100+ 技巧集合学习 Nuxt!

NuxtApp

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

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

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

Nuxt 应用接口

跳转至 NuxtApp 接口文档。

Nuxt 上下文

许多 composable 和实用程序(包括内置的和用户创建的)可能需要访问 Nuxt 实例。这并非在应用程序的任何地方都存在,因为每次请求都会创建一个新的实例。

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

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

访问 NuxtApp

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

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

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

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

阅读更多:文档 > 指南 > 目录结构 > 插件

提供助手函数

你可以提供助手函数,使其在所有 composable 和应用程序中可用。这通常在 Nuxt 插件中完成。

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

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