上下文

源文件
Nuxt Kit 提供了一套工具，帮助你处理上下文。

Nuxt 模块允许你增强 Nuxt 的功能。它们提供了一种结构化的方式来保持代码的组织性和模块化。如果你想将模块拆分为更小的组件，Nuxt 提供了 useNuxt 和 tryUseNuxt 函数。这些函数使你能够方便地从上下文中访问 Nuxt 实例，而无需将其作为参数传递。

当你使用 Nuxt 模块中的 setup 函数时，Nuxt 已经作为第二个参数提供了。这意味着你可以直接访问它，而无需调用 useNuxt()。

useNuxt

从上下文中获取 Nuxt 实例。如果 Nuxt 不可用，它将抛出错误。

使用

import { useNuxt } from '@nuxt/kit'

const setupSomeFeature = () => {
  const nuxt = useNuxt()

  // You can now use the nuxt instance
  console.log(nuxt.options)
}

类型

// @errors: 2391
import type { Nuxt } from '@nuxt/schema'
// ---cut---
function useNuxt (): Nuxt

返回值

useNuxt 函数返回 Nuxt 实例，其中包含 Nuxt 中可用的所有选项和方法。

属性类型描述
optionsNuxtOptions已解析的 Nuxt 配置。
hooksHookable<NuxtHooks>Nuxt 钩子系统。允许注册和监听生命周期事件。
hook(name: string, (...args: any[]) => Promise<void> | void) => () => voidnuxt.hooks.hook 的快捷方式。为特定的生命周期钩子注册单个回调函数。
callHook(name: string, ...args: any[]) => Promise<any>nuxt.hooks.callHook 的快捷方式。手动触发生命周期钩子并运行所有已注册的回调函数。
addHooks(configHooks: NestedHooks) => () => voidnuxt.hooks.addHooks 的快捷方式。一次注册多个钩子。

示例

import { useNuxt } from '@nuxt/kit'

export const setupTranspilation = () => {
  const nuxt = useNuxt()

  if (nuxt.options.builder === '@nuxt/webpack-builder') {
    nuxt.options.build.transpile ||= []
    nuxt.options.build.transpile.push('xstate')
  }
}

tryUseNuxt

从上下文中获取 Nuxt 实例。如果 Nuxt 不可用，它将返回 null。

使用

import { tryUseNuxt } from '@nuxt/kit'

function setupSomething () {
  const nuxt = tryUseNuxt()

  if (nuxt) {
    // You can now use the nuxt instance
    console.log(nuxt.options)
  } else {
    console.log('Nuxt is not available')
  }
}

类型

// @errors: 2391
import type { Nuxt } from '@nuxt/schema'
// ---cut---
function tryUseNuxt (): Nuxt | null

返回值

tryUseNuxt 函数在可用时返回 Nuxt 实例，如果 Nuxt 不可用则返回 null。

useNuxt 部分中描述的 Nuxt 实例。

示例

declare module 'nuxt/schema' {
  interface NuxtOptions {
    siteConfig: SiteConfig
  }
}
// ---cut---
import { tryUseNuxt } from '@nuxt/kit'

interface SiteConfig {
  title?: string
}

export const requireSiteConfig = (): SiteConfig => {
  const nuxt = tryUseNuxt()
  if (!nuxt) {
    return {}
  }
  return nuxt.options.siteConfig
}