🎈 この記事はWP専用です
https://wp.me/pc9NHC-vM
前置き
非同期通信に使えるfetchをご紹介🌟
APIからデータを取得する方法は2つ!
fetch
asyncData
2つの違いについても解説しました🎀👩🏫
⬇️asyncDataの記事はこちら
https://wp.me/pc9NHC-ut
asyncDataとの違い
値のセット先が違う
asyncData:直接コンポーネントにセット
fetch:Vuexのstoreに格納📦
呼び出されるタイミングが違う
asyncData:インスタンス作成前
fetch:インスタンス作成後
The Nuxt.js fetch hook is called after the component instance is created on the server-side: this is available inside it.
【翻訳】
Nuxt.jsフェッチフックは、
サーバー側でコンポーネントインスタンスが
作成された後に呼び出されます。
これは、その内部で使用できます。
違いはこれくらいです!
他はほとんど変わりません🌟
基本的にはasyncDataと同じ
使い方・書き方
asyncDataとほとんど一緒です👌
Promiseを返すか
async/awaitを使うかです💡
詳しい書き方はasyncDataの記事をご覧ください👀
thisが使えない
thisを通してコンポーネントのインスタンスに
アクセスすることができません💥
使用箇所
pages内コンポーネントのみ使用可能
fetch
fetchとは
🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-vM