Nuxt3 中文课程《实战全栈开发简书》限时优惠

useLazyFetch

这个对useFetch的封装会立即触发导航。

描述

默认情况下,useFetch在其异步处理程序解析之前会阻止导航。useLazyFetch提供了一个包装器,将useFetch包装起来,通过将lazy选项设置为true来在处理程序解析之前触发导航。

useLazyFetch具有与useFetch相同的签名。
Read more in Docs > API > Composables > Use Fetch.

示例

pages/index.vue
<script setup lang="ts">
/* 在获取完成之前导航将会发生。
  在组件模板中直接处理待处理和错误状态。
*/
const { pending, data: posts } = await useLazyFetch('/api/posts')
watch(posts, (newPosts) => {
  // 因为posts可能最初为null,你不能立即访问它的内容,但可以监视它。
})
</script>

<template>
  <div v-if="pending">
    加载中 ...
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- 做一些操作 -->
    </div>
  </div>
</template>
useLazyFetch是编译器转换的保留函数名,因此你不应该将自己的函数命名为useLazyFetch
Read more in Docs > Getting Started > Data Fetching.