传统组合 API
Nuxt Bridge 提供了组合 API 语法的访问权限。它专门设计为与 Nuxt 3 保持一致。因此,如果您之前一直在使用组合 API,启用 Nuxt Bridge 时需要进行一些额外的步骤。
移除模块
- 从您的依赖中移除
@vue/composition-api
。 - 从您的依赖中移除
@nuxtjs/composition-api
(并从nuxt.config
的模块中移除)。
@vue/composition-api
使用
如果您一直只使用 @vue/composition-api
而未使用 @nuxtjs/composition-api
,那么事情会非常简单。
- 首先,移除手动注册组合 API 的插件。Nuxt Bridge 将为您处理这个问题。
- import Vue from 'vue' - import VueCompositionApi from '@vue/composition-api' - - Vue.use(VueCompositionApi)
- 否则,您无需做任何事情。不过,如果您愿意,可以移除从
@vue/composition-api
的显式导入,并依赖 Nuxt Bridge 为您自动导入它们。
@nuxtjs/composition-api
迁移 从
Nuxt Bridge 对组合 API 的实现与 @nuxtjs/composition-api
略有不同,并提供了不同的组合函数(旨在与 Nuxt 3 提供的组合函数保持一致)。
因为一些组合函数已经被移除且暂时没有替代品,这将是一个稍微复杂的过程。
@nuxtjs/composition-api/module
从您的 buildModules 中移除
您目前无需立即更新您的导入 - Nuxt Bridge 将自动为您提供大多数当前导入的“填充”,以便您有时间迁移到新的与 Nuxt 3 兼容的组合函数,以下是例外情况:
withContext
已被移除。请参见 下面。useStatic
已被移除。目前没有替代品。如果您有用例,请随意提出讨论。- 已弃用的
reqRef
和reqSsrRef
现在已完全移除。请按以下说明替换为 ssrRef。
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
这曾是一个类型助手存根函数,现在已被移除。
您还可以通过移除此函数(如同 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) {}
defineNuxtPlugin
函数。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)