---
title: "传统 Composition API"
description: "了解如何使用 Nuxt Bridge 迁移到 Composition API。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/bridge/bridge-composition-api"
---
# 传统 Composition API

> 了解如何使用 Nuxt Bridge 迁移到 Composition API。

Nuxt Bridge 提供对 Composition API 语法的访问。它专门设计为与 Nuxt 3 保持一致。因此，如果您之前已经使用过 Composition API，启用 Nuxt Bridge 时需要多做几个步骤。

## 移除模块

- 从依赖中移除 `@vue/composition-api`。
- 从依赖中移除 `@nuxtjs/composition-api`（以及 `nuxt.config` 中的模块）。

## 使用 `@vue/composition-api`

如果你只使用了 `@vue/composition-api`，而没有使用 `@nuxtjs/composition-api`，那么迁移非常简单。

1. 首先，移除手动注册 Composition API 的插件。Nuxt Bridge 会为你处理这部分。
   ```diff
   - import Vue from 'vue'
   - import VueCompositionApi from '@vue/composition-api'
   -
   - Vue.use(VueCompositionApi)
   ```
2. 否则，你无需做任何操作。不过，如果你愿意，也可以移除对 `@vue/composition-api` 的显式导入，依赖 Nuxt Bridge 来自动导入它们。

## 从 `@nuxtjs/composition-api` 迁移

Nuxt Bridge 对 Composition API 的实现与 `@nuxtjs/composition-api` 略有不同，且提供了不同的组合函数（设计上与 Nuxt 3 提供的组合函数保持一致）。

由于部分组合函数已被移除且尚无替代方案，整个过程会稍显复杂。

### 从 buildModules 中移除 `@nuxtjs/composition-api/module`

你无需立即更新导入——Nuxt Bridge 会自动为你目前的大多数导入提供“垫片”，以便你有时间迁移到新的兼容 Nuxt 3 的组合函数，但以下例外情况需要注意：

- `withContext` 已被移除。请参阅[下文](https://nuxt.zhcndoc.com/docs/3.x/bridge/nuxt3-compatible-api#usecontext-and-withcontext)。
- `useStatic` 已被移除。目前没有替代方案。如果你有相关使用场景，欢迎发起讨论。
- 已弃用的 `reqRef` 和 `reqSsrRef` 现已被完全移除。请按照下方关于 [ssrRef](https://nuxt.zhcndoc.com/docs/3.x/bridge/nuxt3-compatible-api#ssrref-and-shallowssrref) 的说明进行替换。

### 设置 `bridge.capi`

```ts
import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    capi: true,
    nitro: false // 如果已完成迁移到 Nitro，则设置为 true
  }
})
```

对于你使用的每个来自 `@nuxtjs/composition-api` 的组合函数，按照下面步骤操作。

### useFetch

`$fetchState` 和 `$fetch` 已被移除。

```diff
const {
- $fetch,
- $fetchState,
+ fetch,
+ fetchState,
} = useFetch(() => { posts.value = await $fetch('/api/posts') })
```

### `defineNuxtMiddleware`

这是一个类型辅助的存根函数，现在已被移除。

移除 `defineNuxtMiddleware` 包裹：

```diff
- import { defineNuxtMiddleware } from '@nuxtjs/composition-api`
- export default defineNuxtMiddleware((ctx) => {})
+ export default (ctx) => {}
```

若需支持 TypeScript，可以使用 `@nuxt/types`：

```ts
import type { Middleware } from '@nuxt/types'

export default <Middleware> function (ctx) { }
```

### `defineNuxtPlugin`

这是一个类型辅助的存根函数，现在已被移除。

你也可以继续使用 Nuxt 2 风格的插件，只需移除函数即可（与 [defineNuxtMiddleware](https://nuxt.zhcndoc.com/docs/3.x/bridge/bridge-composition-api#definenuxtmiddleware) 一样）。

移除 `defineNuxtPlugin` 包裹：

```diff
- import { defineNuxtPlugin } from '@nuxtjs/composition-api'
- export default defineNuxtPlugin((ctx, inject) => {})
+ export default (ctx, inject) => {}
```

若需支持 TypeScript，可以使用 `@nuxt/types`：

```ts
import type { Plugin } from '@nuxt/types'

export default <Plugin> function (ctx, inject) {}
```

::warning
虽然这个示例依然有效，但 Nuxt 3 引入了一个新的 `defineNuxtPlugin` 函数，签名略有不同。
::

::read-more{link="/docs/3.x/directory-structure/plugins#creating-plugins"}
::

### `useRouter` 和 `useRoute`

Nuxt Bridge 通过 [`useRouter`](https://nuxt.zhcndoc.com/docs/3.x/api/composables/use-router) 和 `useRoute` 为这些组合函数提供了直接替代方案。

唯一的主要区别是，[`useRoute`](https://nuxt.zhcndoc.com/docs/3.x/api/composables/use-route) 不再返回计算属性。

```diff
- import { useRouter, useRoute } from '@nuxtjs/composition-api'

  const router = useRouter()
  const route = useRoute()

- console.log(route.value.path)
+ console.log(route.path)
```


## Sitemap

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