🐕
[和訳] Nuxt3 公式サイト~useAsyncData
この記事について
この記事はNuxt3 公式サイト useAsyncData を和訳したものになります(日本語が不自然になってしまっている箇所があるのはごめんなさい)。
useAsyncData
ページ、コンポーネント、プラグイン内で、useAsyncData を使用して、非同期に解決されるデータにアクセスすることができます。
Type
Signature
function useAsyncData(
handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
options?: AsyncDataOptions<DataT>
): AsyncData<DataT>
function useAsyncData(
key: string,
handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
options?: AsyncDataOptions<DataT>
): Promise<AsyncData<DataT>>
type AsyncDataOptions<DataT> = {
server?: boolean
lazy?: boolean
default?: () => DataT | Ref<DataT> | null
transform?: (input: DataT) => DataT
pick?: string[]
watch?: WatchScore[]
immediate?: boolean
}
interface RefreshOptions {
dedupe?: boolean
}
type AsyncData<DataT, ErrorT> = {
data: Ref<DataT | null>
pending: Ref<boolean>
execute: () => Promise<void>
refresh: (opts?: RefreshOptions) => Promise<void>
error: Ref<ErrorT | null>
}
Params
-
key:リクエスト間でデータの取得が適切に重複しないようにする一意のキー。キーを与えなかった場合、
useAsyncData
のインスタンスのファイル名と行番号に対応する一意のキーが生成されます。 - handler:値を返す非同期関数です。
-
options:
- lazy:クライアントサイドのナビゲーションをブロックするの代わりに、ルートをロードしたあとに非同期関数を解決するかどうか(デフォルトは
false
) - default:非同期関数を解決する前に、データのデフォルト値を設定するためのファクトリー関数 -
lazy: true
オプションで特に便利です。 - server:サーバーでデータを取得するかどうか(デフォルトは
true
) - transform:解決した後にハンドラ関数の結果を変更するために使用できる関数
- pick:ハンドラ関数の結果からこの配列の指定されたキーだけを取り出します。
- watch:リアクティブソースの自動更新を監視する
- immediate:
false
に設定すると、リクエストが即座に実行するのを防ぎます(デフォルトはtrue
)。
- lazy:クライアントサイドのナビゲーションをブロックするの代わりに、ルートをロードしたあとに非同期関数を解決するかどうか(デフォルトは
内部で、lazy: false
はデータが取得される前にルートの読み込みをブロックするために <Suspense>
を使用します。より快活なユーザエクスペリアのために、lazy: true
を使用し、代わりにローティング状態を実装することを検討してください。
Return Values
- data:渡される非同期関数の結果
- pending:データがまだ取得されているかどうかを示す真偽値
-
refresh/execute:
handler
関数が返すデータを更新するために使用できる関数 - error:データ取得が失敗した場合のエラーオブジェクト
デフォルトでは、Nuxt は refresh
が終わるまで、再度実行することはできません。
Example
const { data, pending, error, refresh } = await useAsyncData(
'mountains',
() => $fetch('https://api.nuxtjs.dev/mountains')
)
詳細は下記ページを参照してください。
Discussion