useLazyFetch
この useFetch のラッパーは、ナビゲーションを即座にトリガーします。
説明
デフォルトでは、useFetch は非同期ハンドラーが解決されるまでナビゲーションをブロックします。useLazyFetch は、lazy オプションを true に設定することで、ハンドラーが解決される前にナビゲーションをトリガーする useFetch のラッパーを提供します。
useLazyFetch は useFetch と同じシグネチャを持ちます。
このモードで useLazyFetch を待機することは、呼び出しが初期化されることのみを保証します。クライアントサイドのナビゲーションでは、データがすぐに利用可能でない場合があるため、アプリ内で保留状態を適切に処理する必要があります。
例
pages/index.vue
<script setup lang="ts">
/* フェッチが完了する前にナビゲーションが発生します。
* コンポーネントのテンプレート内で 'pending' と 'error' の状態を直接処理します
*/
const { status, data: posts } = await useLazyFetch('/api/posts')
watch(posts, (newPosts) => {
// posts は最初は null かもしれないので、
// その内容にすぐにアクセスできないかもしれませんが、監視することはできます。
})
</script>
<template>
<div v-if="status === 'pending'">
Loading ...
</div>
<div v-else>
<div v-for="post in posts">
<!-- 何かをする -->
</div>
</div>
</template>
useLazyFetch はコンパイラによって変換される予約関数名であるため、自分の関数を useLazyFetch と名付けるべきではありません。
※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。
公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/api/composables/use-lazy-fetch