---
title: "上下文"
description: "Nuxt Kit 提供了一组实用工具，帮助你处理上下文。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/api/kit/context"
---
# 上下文

> Nuxt Kit 提供了一组实用工具，帮助你处理上下文。

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

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

## `useNuxt`

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

### 用法

```ts
import { useNuxt } from '@nuxt/kit'

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

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

### 类型

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

### 返回值

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

| 属性         | 类型                                                                        | 描述                                                 |
| ---------- | ------------------------------------------------------------------------- | -------------------------------------------------- |
| `options`  | `NuxtOptions`                                                             | 解析后的 Nuxt 配置。                                      |
| `hooks`    | `NuxtHookRegistry<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: NuxtNestedHooks) => () => void`                            | `nuxt.hooks.addHooks` 的快捷方式。一次注册多个钩子。              |

### 示例

::code-group
```ts twoslash [setupTranspilation.ts]
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')
  }
}
```

```ts twoslash [module.ts]
// @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`。

### 用法

```ts twoslash
import { tryUseNuxt } from '@nuxt/kit'

function setupSomething () {
  const nuxt = tryUseNuxt()

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

### 类型

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

### 返回值

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

Nuxt 实例的结构如 `useNuxt` 部分所述。

### 示例

::code-group
```ts twoslash [requireSiteConfig.ts]
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
}
```

```ts twoslash [module.ts]
// @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
  },
})
```
::

---

- [源码](https://github.com/nuxt/nuxt/blob/main/packages/kit/src/context.ts)


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.