组件选项

asyncData 和 fetch

Nuxt 3 提供了新的选项用于 从 API 获取数据。

同构 Fetch

在 Nuxt 2 中，您可能使用 @nuxtjs/axios 或 @nuxt/http 来获取数据 - 或者只是使用 polyfilled 全局 fetch。

在 Nuxt 3 中，您可以使用全局可用的 fetch 方法，该方法与 Fetch API 具有相同的 API，或者使用 $fetch 方法，该方法使用 unjs/ofetch。它具有一些优势，包括

1. 如果在服务器上运行，它将“智能地”处理 直接 API 调用；如果在客户端上运行，它将对您的 API 发出客户端调用。（它还可以处理对第三方 API 的调用。）
2. 此外，它还附带了便捷功能，包括自动解析响应和序列化数据。

您可以阅读更多关于 直接 API 调用 或 获取数据 的内容。

Composables

Nuxt 3 提供了用于获取数据的新 composables：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 }
  },
  // or alternatively
  fetch () {
    this.post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
  }
}

在您的方法和模板中，您可以像使用组件提供的任何其他数据一样使用 post 变量。

使用 Nuxt 3，您可以在 setup() 方法或 <script setup> 标签中使用 composables 执行此数据获取

<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 来更新数据。

迁移

1. 将 asyncData 钩子替换为 useAsyncData 或 useFetch，用于您的页面/组件。
2. 将 fetch 钩子替换为 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 钩子仅接受一个参数，即 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>