组件选项 Component Options

Nuxt3迁移指南 - 组件选项

asyncData and fetch component options

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

同构获取

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

在 Nuxt 3 中，您可以使用全局可用的fetch方法，该方法具有与 Fetch API 相同的 API 或 使用 unjs/ofetch 的 $fetch 方法。 它有很多好处，包括：

  1. 如果它在服务器上运行，它将巧妙地进行 直接 API 调用，或者如果它正在运行，则对您的 API 进行客户端调用 在客户端上。 (它还可以处理调用第三方 API。)
  2. 此外，它还具有包括自动解析响应和字符串化数据在内的便捷功能。

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

使用可组合项

Nuxt 3 提供了用于获取数据的新可组合项：useAsyncData 和 useFetch。 它们每个都有“惰性”变体(useLazyAsyncData 和 useLazyFetch)，它们不会阻止客户端导航。

在 Nuxt 2 中，您将使用类似于以下的语法在组件中获取数据：

ts
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> 标签中使用可组合项来执行此数据获取：

vue
<script setup>
// 通过 `defineProps()`、`useRoute()` 等在任何地方定义参数。
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 的便利包装器，用于简单地从端点获取数据。

迁移步骤

  1. 将页面/组件中的 asyncData 挂钩替换为 useAsyncData 或 useFetch。
  2. 将组件中的 fetch 挂钩替换为 useAsyncData 或 useFetch。

请参阅 元标记迁移。

key

您现在可以在“definePageMeta”编译器宏中定义一个键。

pages/index.vue
diff
- <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>

迁移步骤

  1. 将 key 从组件选项迁移到 definePageMeta。

layout

See layout migration.

loading

Nuxt 3 尚不支持此功能。

middleware

请参阅 中间件迁移。

scrollToTop

Nuxt 3 尚不支持此功能。如果您想覆盖 vue-router 的默认滚动行为，可以在 ~/app/router.options.ts 中进行(参见 [docs](/docs /dirs/pages/#router-options)) 了解更多信息。

transition

See layout migration.

validate

Nuxt 3 中的验证钩子只接受一个参数，即“路由”。 就像在 Nuxt 2 中一样，您可以返回一个布尔值。 如果返回 false 并且找不到另一个匹配项，这将意味着 404。您也可以直接返回一个带有 statusCode/statusMessage 的对象以立即响应错误(不会检查其他匹配项)。

pages/users/[id
diff
- <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 中不支持。相反，您可以直接使用观察者来触发重新获取数据。

pages/users/[id
vue
<script setup>
const route = useRoute()
const { data, refresh } = await useFetch('/api/user')
watch(() => route.query, () => refresh())
</script>