旧版 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（已被弃用）现已被完全删除。

设置 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)