傳統 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 以與 @nuxtjs/composition-api 略有不同的方式實現了 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, // 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

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

您也可以繼續使用 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)