Legacy Composition API

Nuxt Bridge 提供了对组合式 API 语法的访问。它专门为与 Nuxt 3 对齐而设计。因此，如果你之前使用过组合式 API，启用 Nuxt Bridge 时需要进行一些额外的步骤。

移除模块

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

使用 @vue/composition-api

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

1. 首先，移除手动注册组合式 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 在实现组合式 API 方面与 @nuxtjs/composition-api 略有不同，并提供了不同的可组合式（旨在与 Nuxt 3 提供的可组合式对齐）。

由于某些可组合式已被移除且尚无替代方案，这将是一个稍微复杂的过程。

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

你无需立即更新导入 - Nuxt Bridge 将自动为你提供大多数当前导入的“替代品”，以便你有时间迁移到新的、与 Nuxt 3 兼容的可组合式。以下是例外情况：

• withContext 已被移除。请参阅下文有关 useContext 和 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) {}

useRouter 和 useRoute

Nuxt Bridge 通过 useRouter 和 useRoute 直接提供了这些可组合式的替代方案。

唯一的关键区别是 useRoute 不再返回计算属性。

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

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

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