useAsyncData
useAsyncData は、SSR 対応のコンポーザブルで非同期的に解決されるデータへのアクセスを提供します。
ページ、コンポーネント、プラグイン内で、useAsyncData を使用して非同期的に解決されるデータにアクセスできます。
useAsyncData は、Nuxt コンテキストで直接呼び出すことを目的としたコンポーザブルです。リアクティブなコンポーザブルを返し、応答を Nuxt ペイロードに追加して、ページがハイドレーションされるときに、クライアント側でデータを再フェッチすることなくサーバーからクライアントに渡せるようにします。使い方
pages/index.vue
<script setup lang="ts">
const { data, status, error, refresh, clear } = await useAsyncData(
'mountains',
() => $fetch('https://api.nuxtjs.dev/mountains')
)
</script>
カスタムの useAsyncData ラッパーを使用している場合は、コンポーザブル内で await しないでください。予期しない動作が発生する可能性があります。カスタムの非同期データフェッチャーの作成方法については、このレシピに従ってください。
data、status、error は Vue の ref であり、<script setup> 内で使用する場合は .value を使用してアクセスする必要があります。一方、refresh/execute と clear はプレーンな関数です。パラメータの監視
組み込みの watch オプションを使用すると、変更が検出されたときにフェッチャー関数を自動的に再実行できます。
pages/index.vue
<script setup lang="ts">
const page = ref(1)
const { data: posts } = await useAsyncData(
'posts',
() => $fetch('https://fakeApi.com/posts', {
params: {
page: page.value
}
}), {
watch: [page]
}
)
</script>
useAsyncData は、コンパイラーによって変換される予約済みの関数名であるため、独自の関数に useAsyncData という名前を付けないでください。パラメータ
key: リクエスト間でデータフェッチを適切に重複排除できるようにするためのユニークなキー。キーを指定しない場合は、useAsyncDataのインスタンスのファイル名と行番号に固有のキーが生成されます。handler: 真の値（たとえば、undefinedまたはnullにすべきではありません）を返す必要がある非同期関数。そうしないと、クライアント側でリクエストが重複する可能性がありますオプション:server: サーバーでデータをフェッチするかどうか（デフォルトはtrue）lazy: クライアント側のナビゲーションをブロックするのではなく、ルートの読み込み後に非同期関数を解決するかどうか（デフォルトはfalse）immediate:falseに設定すると、リクエストがすぐに送信されるのを防ぎます（デフォルトはtrue）。default: 非同期関数が解決する前に、dataのデフォルト値を設定するためのファクトリー関数。lazy: trueまたはimmediate: falseオプションで役立ちますtransform: 解決後、handler関数の結果を変更するために使用できる関数getCachedData: キャッシュされたデータを返す関数を提供します。null または undefined の戻り値は、フェッチをトリガーします。デフォルトでは、これはkey => nuxt.isHydrating ? nuxt.payload.data[key] : nuxt.static.data[key]です。これは、payloadExtractionが有効になっている場合にのみデータをキャッシュします。pick:handler関数の結果から、この配列で指定されたキーのみを選択しますwatch: リアクティブなソースを監視して自動更新しますdeep: データがディープ ref オブジェクトで返されます（デフォルトはtrue）。データをシャロー ref オブジェクトで返すようにfalseに設定できます。これにより、データがディープリアクティブである必要がない場合にパフォーマンスを向上させることができます。dedupe: 同じキーを一度に複数回フェッチすることを回避します（デフォルトはcancel）。可能なオプションcancel- 新しいリクエストが作成されたときに既存のリクエストをキャンセルしますdefer- 保留中のリクエストがある場合は、新しいリクエストを一切作成しません
内部的には、
lazy: false は <Suspense> を使用して、データがフェッチされる前にルートの読み込みをブロックします。よりスムーズなユーザーエクスペリエンスを得るには、代わりに lazy: true を使用してローディング状態を実装することを検討してください。戻り値
data: 渡された非同期関数の結果。refresh/execute:handler関数によって返されるデータを更新するために使用できる関数。error: データフェッチが失敗した場合のエラーオブジェクト。status: データリクエストのステータスを示す文字列（"idle"、"pending"、"success"、"error"）。clear:dataをundefinedに設定し、errorをnullに設定し、statusを'idle'に設定し、現在保留中のリクエストをキャンセル済みとしてマークする関数。
デフォルトでは、Nuxt は refresh が完了するまで、再度実行されるのを待ちます。
サーバーでデータをフェッチしていない場合（たとえば、
server: false を使用した場合）、ハイドレーションが完了するまでデータはフェッチされません。つまり、クライアント側でuseAsyncData を await しても、<script setup> 内では data は null のままになります。型
シグネチャ
function useAsyncData<DataT, DataE>(
handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
options?: AsyncDataOptions<DataT>
): AsyncData<DataT, DataE>
function useAsyncData<DataT, DataE>(
key: string,
handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
options?: AsyncDataOptions<DataT>
): Promise<AsyncData<DataT, DataE>>
type AsyncDataOptions<DataT> = {
server?: boolean
lazy?: boolean
immediate?: boolean
deep?: boolean
dedupe?: 'cancel' | 'defer'
default?: () => DataT | Ref<DataT> | null
transform?: (input: DataT) => DataT | Promise<DataT>
pick?: string[]
watch?: WatchSource[]
getCachedData?: (key: string, nuxtApp: NuxtApp) => DataT
}
type AsyncData<DataT, ErrorT> = {
data: Ref<DataT | null>
refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
clear: () => void
error: Ref<ErrorT | null>
status: Ref<AsyncDataRequestStatus>
};
interface AsyncDataExecuteOptions {
dedupe?: 'cancel' | 'defer'
}
type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'