Nuxt独自

【Nuxt.js】Nuxt文法編:fetch

前置き

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

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

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

⬇️asyncDataの記事はこちら


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.

https://ja.nuxtjs.org/guides/features/data-fetching/

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

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


基本的にはasyncDataと同じ

使い方・書き方

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

thisが使えない

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

使用箇所

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


fetch

fetchとは

asyncDataとの違いにも書きましたが
API通信の結果をVuexのstoreに格納するものです🧸

公式ガイドはこちら
https://ja.nuxtjs.org/api/pages-fetch/


簡単な使い方

JSONPlaceholderを表示させるだけ
https://jsonplaceholder.typicode.com/posts

axiosを使うのでinstallします📥
axiosの解説はこちら
https://wp.me/pc9NHC-gr

terminal

$ npm install --save @nuxtjs/axios

解説

syncDataと一緒ですね❣️
Promiseを返すか
async/awaitを使うかです。

今回はasync/awaitを使用しました。
awaitPromiseの役割をしています。

こちらについてもasyncDataで
解説しているので、ご確認ください👀
https://wp.me/pc9NHC-ut

コード

極力コードを最小限にするために
v-forなどは使わず、
gettersも使わずstoreを直接呼び出しています!

) pages

) file


リスト化した場合

今度は先ほどのJSONPlaceholderの
titleだけをリスト化してみます🌟

コード

) pages

) file


paramsを使用した場合

JSONPlaceholder
今度はこちらを動的ルーティングと
paramsを使用して取得してみます🌟
https://jsonplaceholder.typicode.com/posts/1

ここのtitleだけ表示させてみます💡
ul>liの必要がないのでpタグで表示させます。

解説

  • 動的ルーティングのため
    index.vueではなく_id.vueを使用
  • contextparamsrouteを追加
  • url部分はテンプレートリテラル
    `(バッククオート)の中に ${変数} を使って記載
    使わない場合は
    '(シングルクオート) の中に + $route.params.idを連結

コード

) pages

) file


まとめ

  • 使い方はasyncDataと同じ
  • 違いは値のセットの仕方と呼び出されるタイミング

-Nuxt独自
-,

© 2020 aLiz Nuxt