useFetch、useLazyFetch、useAsyncData 、useLazyAsyncData的功能和区别是什么？

Nuxt 提供\nuseFetch、useLazyFetch、useAsyncData 和 useLazyAsyncData 来获取数据。

useFetch

<script setup>// get方式
const { data: count } = await useFetch('/api/count')// post 方式const { data: count } = await useFetch('/api/count',{methods: "post", body : {id:123} })
</script>\n\n<template>\n  Page visits: {{ count }}\n</template>\n

useLazyFetch

useFetch的异步实现。异步函数不会阻止导航。这意味着你需要通过watch监听处理在获取数据之前的异常情况。

有关详细信息，请参阅Docs > API > Composables >使用延迟获取。

<template>\n  <!-- you will need to handle a loading state -->\n  <div v-if="pending">\n    Loading ...\n  </div>\n  <div v-else>\n    <div v-for="post in posts">\n      <!-- do something -->\n    </div>\n  </div>\n</template>\n\n<script setup>\nconst { pending, data: posts } = useLazyFetch('/api/posts')\nwatch(posts, (newPosts) => {\n  // 因为请求刚开始为空，所以获取不到数据，但是可以通过watch 方法监听\n})\n</script>\n

useAsyncData 

可以使用它来访问异步解析的数据。

您可能会问自己：两者之间有什么区别？简而言之，接收一个 URL 并获取该数据，其中可能具有更复杂的 logic.is 几乎等同于最常见的用例的开发人员体验糖。

有关详细信息，请参阅文档> API > 可组合项>使用异步数据。

// server/api/count.ts\nlet counter = 0\nexport default () => {\n  counter++\n  return JSON.stringify(counter)\n}\n\n// app.vue\n<script setup>\nconst { data } = await useAsyncData('count', () => $fetch('/api/count'))\n</script>\n\n<template>\n  Page visits: {{ data }}\n</template>\n

useLazyAsyncData 

useAsyncData 的异步实现。换句话说，异步函数不会阻止导航。这意味着您将需要处理数据所在的情况（或您在自定义工厂函数中提供的任何值）。

有关详细信息，请参阅Docs > API > Composables >使用延迟异步数据。

<template>\n  <div>\n    {{ pending ? 'Loading' : count }}\n  </div>\n</template>\n\n<script setup>\nconst { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))\nwatch(count, (newCount) => {\n  // Because count starts out null, you won't have access\n  // to its contents immediately, but you can watch it.\n})\n</script>\n