🐕

[和訳] Nuxt3 公式サイト~useAsyncData

2023/02/27に公開

Nuxt

Nuxt 3

tech

この記事について

この記事は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: 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')
)

詳細は下記ページを参照してください。

GitHubで編集を提案