组件选项

asyncData 和 fetch

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

同构 Fetch

在 Nuxt 2 中，你可能会使用 @nuxtjs/axios 或 @nuxt/http 来获取数据，或者直接使用 polyfill 的全局 fetch。

在 Nuxt 3 中，你可以使用一个全局可用的 fetch 方法，它具有与 Fetch API 或 $fetch 方法相同的 API。它具有许多优点，包括：

1. 它会根据运行环境智能地进行 直接 API 调用，如果运行在服务器上，则会直接调用 API，如果运行在客户端上，则会向你的 API 发送请求。（它还可以处理调用第三方 API。）
2. 此外，它还提供了方便的功能，包括自动解析响应和将数据转换为字符串。

你可以阅读更多关于 直接 API 调用 或 获取数据 的信息。

组合式 API

Nuxt 3 提供了新的组合式 API 来获取数据：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> 标签中使用组合式 API 来获取数据：

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

迁移

1. 在你的页面/组件中，使用 useAsyncData 或 useFetch 替换 asyncData hook。
2. 在你的组件中，使用 useAsyncData 或 useFetch 替换 fetch hook。

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 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>