新 Composition API
通过从 @nuxtjs/composition-api 迁移到兼容 Nuxt 3 的 API，将来迁移到 Nuxt 3 时需要重写的代码会更少。
ssrRef 和 shallowSsrRef
这两个函数已被一个底层工作原理非常相似的新组合式函数所取代：useState。
关键区别在于，你必须为此状态提供一个 key（键）（Nuxt 之前会为 ssrRef 和 shallowSsrRef 自动生成键），并且它只能在 Nuxt 3 插件（通过 defineNuxtPlugin 定义）或组件实例内部调用。（换句话说，你不能在全局/环境上下文中使用 useState，因为这会有跨请求共享状态的风险。）
- import { ssrRef } from '@nuxtjs/composition-api'
- const ref1 = ssrRef('initialData')
- const ref2 = ssrRef(() => 'factory function')
+ const ref1 = useState('ref1-key', () => 'initialData')
+ const ref2 = useState('ref2-key', () => 'factory function')
// accessing the state
console.log(ref1.value)
由于状态带有键，只要使用相同的键，你就可以从多个位置访问同一个状态。
你可以阅读 Nuxt 3 文档来了解更多关于如何使用此组合式函数的信息。
ssrPromise
此函数已被移除，如果你一直在使用它，你需要寻找替代实现。如果你有关于 ssrPromise 的用例，请通过讨论区（discussion）告知我们。
onGlobalSetup
此函数已被移除，但其用例可以通过在 defineNuxtPlugin 内部使用 useNuxtApp 或 useState 来满足。你还可以在布局的 setup() 函数中运行任意自定义代码。
- import { onGlobalSetup } from '@nuxtjs/composition-api'
- export default () => {
- onGlobalSetup(() => {
+ export default defineNuxtPlugin((nuxtApp) => {
+ nuxtApp.hook('vue:setup', () => {
// ...
})
- }
+ })
useStore
为了访问 Vuex store 实例，你可以使用 useNuxtApp().$store。
- import { useStore } from '@nuxtjs/composition-api`
+ const { $store } = useNuxtApp()
useContext 和 withContext
你可以使用 useNuxtApp 来访问注入的辅助工具。
- import { useContext } from '@nuxtjs/composition-api`
+ const { $axios } = useNuxtApp()
useNuxtApp() 还提供了一个名为 nuxt2Context 的键，它包含了你通常从 Nuxt 2 上下文中访问的所有相同属性，但建议不要直接使用它，因为它在 Nuxt 3 中将不复存在。取而代之的是，请寻找其他方式来获取你需要的内容。（如果找不到，请提出功能请求或发起讨论。）wrapProperty
不再提供此辅助函数，但你可以用以下代码来代替它
import { computed, getCurrentInstance } from 'vue'
const wrapProperty = (property: string, makeComputed = true) => () => {
const vm = getCurrentInstance().proxy
return makeComputed ? computed(() => vm[property]) : vm[property]
}
useAsync 和 useFetch
这两个组合式函数可以替换为 useLazyAsyncData 和 useLazyFetch，其文档可在 Nuxt 3 文档 中找到。就像以前的 @nuxtjs/composition-api 组合式函数一样，这些组合式函数在客户端不会阻塞路由导航（因此名称中带有 "lazy"）。
useFetch 时可能做的那样）。useLazyFetch 必须针对 Nitro 进行配置。从 useAsync 迁移到新的组合式函数
<script setup>
- import { useAsync } from '@nuxtjs/composition-api'
- const posts = useAsync(() => $fetch('/api/posts'))
+ const { data: posts } = useLazyAsyncData('posts', () => $fetch('/api/posts'))
+ // or, more simply!
+ const { data: posts } = useLazyFetch('/api/posts')
</script>
从 useFetch 迁移到新的组合式函数
<script setup>
- import { useFetch } from '@nuxtjs/composition-api'
- const posts = ref([])
- const { fetch } = useFetch(() => { posts.value = await $fetch('/api/posts') })
+ const { data: posts, refresh } = useLazyAsyncData('posts', () => $fetch('/api/posts'))
+ // or, more simply!
+ const { data: posts, refresh } = useLazyFetch('/api/posts')
function updatePosts() {
- return fetch()
+ return refresh()
}
</script>
useMeta
为了与 vue-meta 进行交互，你可以使用 useNuxt2Meta，它可在 Nuxt Bridge 中运行（但不能在 Nuxt 3 中），并允许你以兼容 vue-meta 的方式操作 meta 标签。
<script setup>
- import { useMeta } from '@nuxtjs/composition-api'
useNuxt2Meta({
title: 'My Nuxt App',
})
</script>
你还可以传入计算属性或 ref，meta 值将会被响应式更新
<script setup>
const title = ref('my title')
useNuxt2Meta({
title,
})
title.value = 'new title'
</script>
useNuxt2Meta() 和 Options API 的 head()，因为这样可能会导致行为无法预测。Nuxt Bridge 还提供了一个与 Nuxt 3 兼容的 meta 实现，可以通过 useHead 组合式函数来访问。
<script setup>
- import { useMeta } from '@nuxtjs/composition-api'
useHead({
title: 'My Nuxt App',
})
</script>
你还需要在 nuxt.config 中显式启用它
import { defineNuxtConfig } from '@nuxt/bridge'
export default defineNuxtConfig({
bridge: {
meta: true,
},
})
这个 useHead 组合式函数底层使用 @unhead/vue（而不是 vue-meta）来操作你的 <head>。因此，建议不要同时使用原生 Nuxt 2 的 head() 属性和 useHead，因为它们可能会冲突。
有关如何使用此组合式函数的更多信息，请参阅 Nuxt 3 文档。
显式导入
Nuxt 通过 #imports 别名导出了所有自动导入项，如果需要，可以使用它来进行显式导入
<script setup lang="ts">
import { computed, ref } from '#imports'
const count = ref(1)
const double = computed(() => count.value * 2)
</script>
禁用自动导入
如果你想禁用组合式函数和工具函数的自动导入，可以在 nuxt.config 文件中将 imports.autoImport 设置为 false。
export default defineNuxtConfig({
imports: {
autoImport: false,
},
})
这会完全禁用自动导入，但你仍然可以使用来自 #imports 的 显式导入。