dogwood008の開発メモ!

最近のマイブームは機械学習, Ruby on Rails。中でも機械学習を使った金融商品の自動取引に興味があります。

【Nuxt】asyncDataとfetchの用途の違い

背景

asyncDatafetchも、どちらも非同期にデータを外部サーバへ取りに行く処理を定義するための関数である。どちらも似たような処理ができるものの、2つ用意されているという事はそれぞれに異なる用途がある事を示す。

ここではCSR (Client-Side Rendering) の場合を考えるものとする。

asyncDatafetch の違い

asyncDatafetch より先に呼ばれる

asyncDatabeforeCreate フックの手前で呼ばれる。一方で、 fetchcreated の後で呼ばれる。したがって、 asyncData の中で return した値は fetch の中で利用可能だが、その逆はできないということになる。

よりわかりやすいライフサイクルの説明が公式から提供されているので、参考にされたい:

ライフサイクルの説明
ライフサイクルの説明

クリエイティブ・コモンズ・ライセンス
この図は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 (c) NuxtJS

fetchthis にアクセスできるが、 asyncData はできない

asyncData では this が提供されない。その代わりに、 context にアクセス可能である。だいたいのことは context で提供されるいずれかの引数でできると思われる。

結局、どんな時にどっちを使えば良いのか

asyncDatareturn することで、 this に値を定義することができる。一方、 fetchdata で定義した値を変更することまでしかできず、新規に定義するところまではできない

こう見ると asyncData を使っておけば良さそうに見えるが、 Component の中では asyncData を使用できない制限があるので、その場合は fetch を使う必要がある。

参考

nuxtjs.org

zenn.dev

designsupply-web.com

qiita.com

nuxtjs.org