0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Nuxt.js】Nuxt文法編:fetch

Posted at

🎈 この記事は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

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?