传统 Composition API

了解如何使用 Nuxt Bridge 迁移到 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,那么迁移非常简单。

  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 会自动为你目前的大多数导入提供“垫片”,以便你有时间迁移到新的兼容 Nuxt 3 的组合函数,但以下例外情况需要注意:

  • withContext 已被移除。详见下文 说明
  • useStatic 已被移除,暂无替代方案。如果你有相关需求,欢迎发起讨论。
  • 已弃用的 reqRefreqSsrRef 已完全移除。请按以下说明使用 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) {}
虽然这个示例依然有效,但 Nuxt 3 引入了一个新的 defineNuxtPlugin 函数,签名略有不同。
Read more in Missing link.

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)