🙌
[和訳] Nuxt3 公式サイト~useLazyFetch
この記事について
この記事はNuxt3 公式サイト useLazyFetch を和訳したものになります（日本語が不自然になってしまっている箇所があるのはごめんなさい）。
useLazyFetch
useLazyFetch は lazy オプションを true に設定することでハンドラが解決される前にナビゲーションをトリガーする useFetch 周りのラッパーを提供します。
Description
デフォルトでは、useFetch は非同期関数が解決されるまでナビゲーションをブロックします。
useLazyFetchはuseFetchと同じシグネチャを持ちます。
詳細は下記ページを参照してください。
Example
<template>
<div v-if="pending">
Loading ...
</div>
<div v-else>
<div v-for="post in posts">
<!-- 何かする -->
</div>
</div>
</template>
<script setup>
/* ナビゲーションはフェッチが完了する前に発生します。
保留状態やエラー状態をコンポーネントのテンプレート内で直接処理します。
*/
const { pending, data: posts } = useLazyFetch('/api/posts')
watch(posts, (newPosts) => {
// ポストは null で始まるので、すぐにその内容にアクセスすることはできませんが、
// 見ることはできます。
})
</script>
詳細は下記ページを参照してください。
Discussion