LoginSignup
251
164

More than 3 years have passed since last update.

Nuxt.jsのasyncDataとfetchは何が違うのか

Last updated at Posted at 2019-02-12

Nuxt.jsを使用するうちに、 asyncDatafetch の違いが気になって調べてみたので、その備忘録を記事にします。

2020/4/07追記: Nuxt 2.12 より fetch の動作が 変更されています 。以降に記載している内容はNuxt 2.11 以前のものを対象しているのでご注意ください。

asyncData と fetch の共通点

asyncDatafetch は、両者ともページコンポーネントの初期化前に実行される関数です。これはサーバーサイド、もしくはクライアントサイドでのナビゲーションが発生した際に呼び出されます。どちらも第1引数に context を取るため、クエリパラメータなどの値にアクセスして、それらの値に応じた処理を行うことが可能です。また、これらの処理はコンポーネントのインスタンスが生成される前に行われるため、 this を通してコンポーネントのインスタンスにアクセスすることはできません。

何が違うのか

それでは両者の違いについて確認してみましょう。

asyncData

asyncData は、コンポーネントへデータをセットすることを目的として使用されます。そのため、 asyncData によって返された値はコンポーネントのテンプレートからアクセス可能であり、以下のように利用することができます。

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}
</script>

(Nuxt.js公式サイトより引用)

fetch

fetch は、Vuex storeにデータを格納することを目的として使用されます。そのため asyncData と違ってコンポーネントに値をセットすることはできません。 fetch は以下のように利用することができます。

<template>
  <h1>Stars: {{ $store.state.stars }}</h1>
</template>

<script>
export default {
  async fetch ({ store, params }) {
    let { data } = await axios.get('http://my-api/stars')
    store.commit('setStars', data)
  }
}
</script>

(Nuxt.js公式サイトより引用)

どう使い分けるか

以下のような方針で fetchasyncData を使い分けるのが良さそうです。

以下の条件に該当する場合は fetch

  • Vuexをセントラルレポジトリとして使用している
  • アプリケーション全体において、Vuex storeを通じてデータを取得している

以下の条件に該当する場合は asyncData

  • Vuexをセントラルレポジトリとして使用している
  • 初期化前に非同期処理によってコンポーネントに値をセットすることがある
  • 特定のルートで取り出されたデータは、1つのコンポーネントでのみ使用される
  • Vuex store、コンポーネントへの値のセット、どちらも利用可能な柔軟性が必要である

(Stackoverflowの回答より引用)

まとめ

以上が fetchasyncData の違いです。どちらがどちらより優れているというよりは、設計方針によって使い分けるのが良さそうです。

251
164
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
251
164