传统 Composition API

了解如何使用 Nuxt Bridge 迁移到 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 已被移除。目前没有替代品。如果您有使用场景,请随时提出讨论。
  • 已被弃用的 reqRefreqSsrRef 现已完全移除。按照下方关于 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) {}
虽然此示例有效,但 Nuxt 3 引入了一个新的 defineNuxtPlugin 函数,其签名略有不同。
请阅读缺失链接以了解更多信息。

useRouteruseRoute

Nuxt Bridge 通过 useRouteruseRoute 为这些可组合函数提供了直接替代品。

唯一的关键区别是 useRoute 不再返回计算属性。

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

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

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