舊版 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 // If migration to Nitro is complete, set to 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

這是一個類型輔助函式存根，現在已移除。

您也可以移除函式（如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 提供這些組合式函數的直接替代方案。

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

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

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

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