Context

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()

  // 现在你可以使用 nuxt 实例了
  console.log(nuxt.options)
}

类型

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

返回值

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

属性	类型	描述
`options`	`NuxtOptions`	已解析的 Nuxt 配置。
`hooks`	`Hookable<NuxtHooks>`	Nuxt 钩子系统。允许注册和监听生命周期事件。
`hook`	`(name: string, (...args: any[]) => Promise<void> \| void) => () => void`	`nuxt.hooks.hook` 的简写。为特定生命周期钩子注册单个回调。
`callHook`	`(name: string, ...args: any[]) => Promise<any>`	`nuxt.hooks.callHook` 的简写。手动触发一个生命周期钩子并运行所有已注册的回调。
`addHooks`	`(configHooks: NestedHooks) => () => void`	`nuxt.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')
  }
}

// @module: esnext
// @filename: setupTranspilation.ts
export const setupTranspilation = () => {}
// @filename: module.ts
import { defineNuxtModule } from '@nuxt/kit'
// ---cut---
import { setupTranspilation } from './setupTranspilation'

export default defineNuxtModule({
  setup () {
    setupTranspilation()
  },
})

`tryUseNuxt`

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

用法

import { tryUseNuxt } from '@nuxt/kit'

function setupSomething () {
  const nuxt = tryUseNuxt()

  if (nuxt) {
    // 现在你可以使用 nuxt 实例了
    console.log(nuxt.options)
  } else {
    console.log('Nuxt 不可用')
  }
}

类型

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

返回值

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

Nuxt 实例如 useNuxt 小节中所述。

示例

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
}

// @module: esnext
// @filename: requireSiteConfig.ts
interface SiteConfig {
  title?: string
}
export const requireSiteConfig = (): SiteConfig => {
  return {}
}
// @filename: module.ts
// ---cut---
import { defineNuxtModule, useNuxt } from '@nuxt/kit'
import { requireSiteConfig } from './requireSiteConfig'

export default defineNuxtModule({
  setup (_, nuxt) {
    const config = requireSiteConfig()
    nuxt.options.app.head.title = config.title
  },
})