【Nuxt.js】Nuxt文法編：fetch

🎈 この記事はWP専用です
https://wp.me/pc9NHC-vM

# 前置き

非同期通信に使えるfetchをご紹介🌟

APIからデータを取得する方法は2つ！
fetch
asyncData

2つの違いについても解説しました🎀👩‍🏫

⬇️asyncDataの記事はこちら

【Nuxt.js】Nuxt文法編：asyncData | aLiz Nuxt

# 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.

Data Fetching

【翻訳】
Nuxt.jsフェッチフックは、
サーバー側でコンポーネントインスタンスが
作成された後に呼び出されます。
これは、その内部で使用できます。

違いはこれくらいです！
他はほとんど変わりません🌟

## 基本的にはasyncDataと同じ
### 使い方・書き方
asyncDataとほとんど一緒です👌
Promiseを返すか
async/awaitを使うかです💡
詳しい書き方はasyncDataの記事をご覧ください👀

### thisが使えない
thisを通してコンポーネントのインスタンスに
アクセスすることができません💥

### 使用箇所
pages内コンポーネントのみ使用可能

# fetch

## fetchとは

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-vM