传统 Composition API
Nuxt Bridge 提供对 Composition API 语法的访问。它专门设计为与 Nuxt 3 保持一致。因此,如果您之前已经使用过 Composition API,启用 Nuxt Bridge 时需要多做几个步骤。
移除模块
- 从依赖中移除
@vue/composition-api
。 - 从依赖中移除
@nuxtjs/composition-api
(以及nuxt.config
中的模块)。
@vue/composition-api
使用
如果你只使用了 @vue/composition-api
,而没有使用 @nuxtjs/composition-api
,那么迁移非常简单。
- 首先,移除手动注册 Composition 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 对 Composition 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
这是一个类型辅助的存根函数,现在已被移除。
你仍然可以继续使用 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) {}
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)