傳統組合式 API

Nuxt Bridge 提供對組合式 API 語法的存取。它專為與 Nuxt 3 對齊而設計。因此，如果您先前已使用組合式 API，則在啟用 Nuxt Bridge 時需要執行一些額外步驟。

移除模組

• 從您的依賴項中移除 @vue/composition-api。
• 從您的依賴項（以及 nuxt.config 中的模組）中移除 @nuxtjs/composition-api。

使用 @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 略有不同，並提供不同的 composable（旨在與 Nuxt 3 提供的 composable 對齊）。

由於某些 composable 已被移除且尚無替代方案，因此這將是一個稍微複雜的過程。

從您的 buildModules 中移除 @nuxtjs/composition-api/module

您不必立即更新您的匯入 - Nuxt Bridge 將自動為您目前擁有的大多數匯入提供一個「墊片」，以便讓您有時間遷移到新的、與 Nuxt 3 相容的 composable，但有以下例外情況

• withContext 已被移除。請參閱下方。
• useStatic 已被移除。目前沒有替代方案。如果您有此用途的案例，請隨時發起討論。
• reqRef 和 reqSsrRef（已被棄用）現在已完全移除。請按照以下關於 ssrRef 的說明來替換它。

設定 bridge.capi

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    capi: true,
    nitro: false // If migration to Nitro is complete, set to true
  }
})

對於您從 @nuxtjs/composition-api 使用的其他每個 composable，請按照以下步驟操作。

useFetch

$fetchState 和 $fetch 已被移除。

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

defineNuxtMiddleware

這是一個型別輔助的 stub 函式，現已被移除。

移除 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

這是一個型別輔助的 stub 函式，現已被移除。

您也可以透過移除函式（如defineNuxtMiddleware）來繼續使用 Nuxt 2 風格的外掛程式。

移除 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 為這些 composable 提供直接的替代方案。

唯一的關鍵差異是 useRoute 不再傳回計算屬性。

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

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

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