旧版 Composition API

Nuxt Bridge 提供了对 Composition API 语法的访问。它专门设计为与 Nuxt 3 对齐。因此，如果你之前一直在使用 Composition API，在启用 Nuxt Bridge 时需要多做一些额外的步骤。

移除模块

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

使用 @vue/composition-api

如果你之前只使用了 @vue/composition-api 而没有用 @nuxtjs/composition-api，那么事情就非常简单。

1. 首先，移除你手动注册 Composition API 的插件。Nuxt Bridge 会为你处理这件事。

   - 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 会自动为你当前的大部分导入提供一个“垫片（shim）”，以便你有时间迁移到新的、与 Nuxt 3 兼容的组合式函数，但以下情况除外：

• withContext 已被移除。参见下文。
• useStatic 已被移除。目前没有替代方案。如果你有相关用例，欢迎发起讨论。
• reqRef 和 reqSsrRef 已被弃用，现在已完全移除。请按照下面关于 ssrRef 的说明来替换它们。

设置 bridge.capi

import { defineNuxtConfig } from '@nuxt/bridge'

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

对于你正在使用的 @nuxtjs/composition-api 中的每个其他组合式函数，请遵循以下步骤。

useFetch

$fetchState 和 $fetch 已被移除。

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

defineNuxtMiddleware

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

移除 defineNuxtMiddleware 包装：

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

对于 TypeScript 支持，你可以使用 @nuxt/types：

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

export default <Middleware> function (ctx) { }

defineNuxtPlugin

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

你也可以继续使用 Nuxt 2 风格的插件，通过移除该函数（与 defineNuxtMiddleware 一样）。

移除 defineNuxtPlugin 包装：

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

对于 TypeScript 支持，你可以使用 @nuxt/types：

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

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