Zenn
💬

【Nuxt.js】 asyncDataとfetchって結局どう使うの？

2020/09/17に公開
JavaScript
Nuxt
Vue.js
asyncdata
fetch
tech

TL;DR.

  • asyncDataとfetchはコンポーネントがロードされる度に呼び出され、外部からデータを取得する際に使用する
  • asyncDataは外部から取得したデータをページコンポーネントのみで使用する場合に使用する
  • fetchは取得したデータをVuexのstoreに格納して使用したい場合に使用する

そもそもasyncDataとfetchって何？

  • asyncDataとfetchはページコンポーネントの初期化前に呼び出される関数のこと。
  • SSR(サーバーサイドレンダリング)、ページ遷移前にも呼び出される。
  • 第1引数にcontext(オブジェクト)を取るので、クエリパラメータなどの値にアクセスして処理を行うことができる。
  • 一方で、コンポーネントのインスタンスが作成される前に処理が実行されてしまうため、thisでコンポーネントのインスタンスにアクセスすることができない。

asyncDataの使用法

asyncDataは外部からデータを取得し、ページコンポーネントへ直接セットすることを目的として使用される。asyncDataによって返される値はコンポーネントのテンプレートからアクセスすることで使用できる。

<template>
  <div>{{ hoge }}</div>
</template>

<script>
export default {
  async asyncData({ app }) {
    const doc = await app.$firebase.firestore().collection('hoge').get()
    return { hoge: doc.data().hoge }
  }
}
</script>

fetchの使用法

fetchは外部から取得したデータをVuexのstoreに格納して使用することを目的として使用される。acyncDataとは違ってコンポーネントに値を直接セットすることができない。

<template>
  <div>{{ $store.state.hige }}</div>
</template>

<script>
export default {
  async fetch({ app, store }) {
    const doc = await app.$firebase.firestore().collection('hige').get()
    store.commit('setHige', doc.data().hige)
  }
}
</script>

結局どう使うの？

  • SSRとCSRのライフサイクルはplugin→middleware→validate→asyncData→fetch→beforeCreateの順で処理が実行されているので、タイミング的にはどちらを使用しても影響範囲は変わらないように思える。

  • asyncDataの場合、そのページで直接apiを叩いてデータを取得することを目的としているため、Vuexを使用して共通化している関数などを使用しない。したがって、storeに格納しないデータ(アカウントデータやテーマなどの情報はlocalStrageやsessionStrageかから取得することを想定)を使用してデータ取得を行いたい場合に使用するイメージ。また、asyncData内でstoreを使用することはできるが、gettersを動かしてページにデータを持ってくる必要がある。

  • fetchの場合、Vuexのmutationsを直接叩いてstoreに値をセットして、ページから直接storeを参照するために使用する。したがって、取得したデータの加工や表示方法をstoreに入れる前に全て行う必要がある。つまり、一旦storeに入れてしまったデータを編集して表示することが難しい。取得したデータを完全にページで成形して使用する場合(マスターデータや表示のみで使用する一覧系データなど)に使用するイメージ。また、アプリケーションないで使用しているデータや処理方法がVuexに大きく依存している場合、かなり有効になる。

Discussion