组件选项
asyncData
和 fetch
Nuxt 3 为从 API 获取数据提供了新的选项。
同构 Fetch
在 Nuxt 2 中,您可能会使用 @nuxtjs/axios
或 @nuxt/http
来获取数据 - 或者只是 polyfill 的全局 fetch
。
在 Nuxt 3 中,您可以使用全局可用的 fetch
方法,它具有与 Fetch API 相同的 API,或者使用 $fetch
方法,后者使用了 unjs/ofetch。它具有许多优点,包括
- 如果它在服务器上运行,它将“智能地”处理进行直接 API 调用,或者如果它在客户端上运行,则进行客户端调用到您的 API。(它还可以处理调用第三方 API。)
- 此外,它还具有方便的功能,包括自动解析响应和字符串化数据。
Composables
Nuxt 3 提供了新的 composables 用于获取数据:useAsyncData
和 useFetch
。它们各自都有“lazy”变体(useLazyAsyncData
和 useLazyFetch
),这些变体不会阻止客户端导航。
在 Nuxt 2 中,您可以使用类似于以下的语法在组件中获取数据
export default {
async asyncData({ params, $http }) {
const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
return { post }
},
// or alternatively
fetch () {
this.post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
}
}
在您的方法和模板中,您可以像使用组件提供的任何其他数据一样使用 post
变量。
使用 Nuxt 3,您可以使用 composables 在您的 setup()
方法或 <script setup>
标签中执行此数据获取
<script setup lang="ts">
// Define params wherever, through `defineProps()`, `useRoute()`, etc.
const { data: post, refresh } = await useAsyncData('post', () => $fetch(`https://api.nuxtjs.dev/posts/${params.id}`) )
// Or instead - useFetch is a convenience wrapper around useAsyncData when you're just performing a simple fetch
const { data: post, refresh } = await useFetch(`https://api.nuxtjs.dev/posts/${params.id}`)
</script>
您现在可以在 Nuxt 3 模板中使用 post
,或者调用 refresh
来更新数据。
useFetch
并非 fetch()
hook 的直接替代品。相反,useAsyncData
替代了这两个 hooks 并且更可定制;它可以做的不只是从端点获取数据。useFetch
是 useAsyncData
的一个便捷包装器,用于简单地从端点获取数据。迁移
- 将
asyncData
hook 替换为页面/组件中的useAsyncData
或useFetch
。 - 将
fetch
hook 替换为组件中的useAsyncData
或useFetch
。
head
key
您现在可以在 definePageMeta
编译器宏中定义 key。
- <script>
- export default {
- key: 'index'
- // or a method
- // key: route => route.fullPath
- }
+ <script setup>
+ definePageMeta({
+ key: 'index'
+ // or a method
+ // 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 hook 仅接受一个参数,即 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 不支持此功能。相反,您可以直接使用 watcher 来触发重新获取数据。
<script setup lang="ts">
const route = useRoute()
const { data, refresh } = await useFetch('/api/user')
watch(() => route.query, () => refresh())
</script>