组件选项
asyncData
和 fetch
Nuxt 3 提供了新的选项用于从 API 获取数据。
同构 Fetch
在 Nuxt 2 中,你可能会使用 @nuxtjs/axios
或 @nuxt/http
来获取数据,或者直接使用 polyfill 的全局 fetch
。
在 Nuxt 3 中,你可以使用全局可用的 fetch
方法,其 API 与 Fetch API 或使用 unjs/ofetch 的 $fetch
方法相同。它具有多个优点,包括:
- 如果运行在服务器端,它会“智能”地进行直接 API 调用;如果运行在客户端,则会从客户端调用你的 API。(它也能处理调用第三方 API。)
- 除此之外,它还提供了便利功能,包括自动解析响应和序列化数据。
组合式函数
Nuxt 3 提供了用于数据获取的新组合式函数:useAsyncData
和 useFetch
。它们各自还有“懒加载”版本(useLazyAsyncData
和 useLazyFetch
),不会阻塞客户端导航。
在 Nuxt 2 中,你会使用类似下面的语法在组件中获取数据:
export default {
async asyncData({ params, $http }) {
const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
return { post }
},
// 或者
fetch () {
this.post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
}
}
在你的方法和模板中,可以像使用组件中提供的其他数据一样使用 post
变量。
而在 Nuxt 3 中,你可以在 setup()
方法或 <script setup>
标签中使用组合式函数完成数据获取:
<script setup lang="ts">
// 通过 `defineProps()`、`useRoute()` 等定义 params
const { data: post, refresh } = await useAsyncData('post', () => $fetch(`https://api.nuxtjs.dev/posts/${params.id}`))
// 或者 - useFetch 是 useAsyncData 的一个简便封装,适合简单的数据获取
const { data: post, refresh } = await useFetch(`https://api.nuxtjs.dev/posts/${params.id}`)
</script>
你现在可以在 Nuxt 3 的模板中使用 post
,或调用 refresh
来更新数据。
useFetch
并不是 fetch()
钩子的直接替代品。实际上,useAsyncData
替代了这两个钩子,且更具可定制性;它能做的不仅仅是从端点获取数据。useFetch
则是基于 useAsyncData
的一个简便包装,用于简单地从端点获取数据。迁移步骤
- 将页面/组件中的
asyncData
钩子替换为useAsyncData
或useFetch
。 - 将组件中的
fetch
钩子替换为useAsyncData
或useFetch
。
head
key
你现在可以在 definePageMeta
编译宏中定义 key。
- <script>
- export default {
- key: 'index'
- // 或一个方法
- // key: route => route.fullPath
- }
+ <script setup>
+ definePageMeta({
+ key: 'index'
+ // 或一个方法
+ // key: route => route.fullPath
+ })
</script>
layout
loading
此功能在 Nuxt 3 中尚不支持。
middleware
scrollToTop
此功能在 Nuxt 3 中尚不支持。如果你想覆盖 vue-router
的默认滚动行为,可以在 ~/app/router.options.ts
中实现(更多信息见文档)。
与 key
类似,可以在 definePageMeta
编译宏中指定。
- <script>
- export default {
- scrollToTop: false
- }
+ <script setup>
+ definePageMeta({
+ scrollToTop: false
+ })
</script>
transition
validate
Nuxt 3 中的 validate 钩子仅接受单个参数 route
。与 Nuxt 2 类似,你可以返回布尔值。如果返回 false 且未找到其他匹配,则会导致 404。你也可以直接返回带有 statusCode
/statusMessage
的对象,立即返回错误(不会再检查其他匹配项)。
- <script>
- export default {
- async validate({ params }) {
- return /^\d+$/.test(params.id)
- }
- }
+ <script setup>
+ definePageMeta({
+ validate: async (route) => {
+ const nuxtApp = useNuxtApp()
+ return /^\d+$/.test(route.params.id)
+ }
+ })
</script>
watchQuery
Nuxt 3 中不支持。在 Nuxt 3 中,你可以直接使用监听器来触发数据刷新。
<script setup lang="ts">
const route = useRoute()
const { data, refresh } = await useFetch('/api/user')
watch(() => route.query, () => refresh())
</script>