旧版 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 会为您处理这部分。

   - 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 已被移除。请参阅下方。
• 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)