アプリ サイト

【Nuxt.js】Nuxt実践編:axios + asyncData + nuxt-link

前置き

お試しAPIのJSONplaceholderを使って
遊んでみましょう⚡️🎸

タイトルを表示させ、
クリックでidに合わせた
動的リンクを行います🌟

データはこちらを使用します💡
https://jsonplaceholder.typicode.com/posts

axios, asyncData, nuxt-linkなどなど
復習できることが沢山😉❤️
できるところはやる必要がないので
ドンドン飛ばしてくださいね✈️⛅️

なんだっけこれ…🤦‍♂️
という方は過去の解説記事をご覧ください👀

【Nuxt.js】axios導入編:かんたん・お手軽API通信
https://wp.me/pc9NHC-gr

【Nuxt.js】Nuxt文法編:非同期通信やasyncDataの使い方
https://wp.me/pc9NHC-192

Let's try!


Step1: axiosでデータを取得

まずはaxiosを使って
データを取得しましょう📥
データの取得さえできれば良いので
ul>liにせず{{ articles }}
簡単に書いてみましょう…!

axiosをインストールします。

terminal

$ npm install --save @nuxtjs/axios

ではコードを書いてみましょう!

ticktack…


できましたか?💡
コードを見ていきましょう!


コード

正解コード①

axiosgetするだけですね💡
Promiseが必要な非同期通信になるので
asyncData()内に記載します✍️
consoleres
res.dataを表示しても良いですね😄

) pages


正解コード②

.thenの代わりに
async/awaitを使っても
もちろんOKです⭕🙆‍♀️

) pages


正解コード③

ayncData()を使わずに
created()を使うパターンです。
created()thisコンテキスト
そのままgetしてきた物を
代入することができちゃいます。

とはいっても意味的には
asyncData()の方が適切です!
なるべく使わないようにしましょう❗️😵

created()についてはこちら
https://wp.me/pc9NHC-z1

) pages

.then(Promise)を使わない場合

Promise使ってね!となり
うまくデータが表示できません😖💦

) pages

出た〜!Promise!💥👻
うわーなんだっけこれ!!!
という方は…

こちらの記事をご覧ください👀
【Nuxt.js】Nuxt文法編:非同期通信やasyncDataの使い方
https://wp.me/pc9NHC-192


Step2: ul>liで見た目を整える

取得したdataのtitleのみを
liで表示させましょう🌟
dataは直接
JSONplaceholderを見ても良いし
consoleでres.dataを表示させてもOK♪
https://jsonplaceholder.typicode.com/posts

ではコードを書いてみましょう!

ticktack…


できましたか?
コードはこちら!


コード

articlesの配列1つ1つをarticleと名付け、
その中のtitleのみを表示させています。

【Nuxt.js】Nuxt文法編:v-for
https://wp.me/pc9NHC-iQ

) pages


Step3: nuxt-linkで動的リンクを作る

res.dataid
同じparamsにリンクさせましょう🎈🧸
飛んだ先ではidを表示させましょう🌟

urlは/aritcle/{id}とします。
id部分は取得したデータ(articles)の
配列articleの中のidなので
article.idとなりますね。

ではコードを書いてみましょう!

ticktack…


できましたか?
ディレクトリ とコードを見ていきましょう!


ディレクトリ

リンク先を/article/{id}にするため
このようなファイル構成になります。

directory

pages/
--| article/
----| _id.vue
--| index.vue


コード

to:toにしないと
文字列になってしまいます。

http://localhost:3000/'/article/'%20+%20article.id

articleは文字列で良いので''で囲み
article.idと連結させます。

【Nuxt.js】Vue Router基礎編:params, queryを使ってページ遷移
https://wp.me/pc9NHC-eI

) pages

) pages

完成です🤗 🎉🎀


まとめ

いかがでしたか?🌷
Step1の短いコードだけでも
意外と基礎知識の情報量が多いな…🤔
と思った方もいると思います。

基礎をしっかり身につけることの
重要さが分かりますね💡
このブログでは今後も
基礎知識を分かりやすく解説します✨💪

-アプリ, サイト
-,

© 2024 aLiz Nuxt