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

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

前置き

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

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

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

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

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

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

Let's try!

Step1: axiosでデータを取得

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

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

【terminal】
$ npm install --save @nuxtjs/axios

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

ticktack…

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

コード

正解コード①

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

index.vue

<template>
 <p>{{ articles }}</p>
</template>

<script>
import axios from 'axios'
export default {
 asyncData () {
   return axios.get('https://jsonplaceholder.typicode.com/posts')
     .then((res) => {
       console.log('結果が帰ってくるまでお仕事')
       return { articles: res.data }
     })
 },
}
</script>

正解コード②

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

index.vue

<template>
 <p>{{ articles }}</p>
</template>

<script>
import axios from 'axios'
export default {
 async asyncData () {
   const res = await axios.get('https://jsonplaceholder.typicode.com/posts')
   return { articles: res.data }
 },
}
</script>

正解コード③

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

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

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

index.vue

<template>
 <p>{{ articles }}</p>
</template>

<script>
import axios from 'axios'
export default {
 data () {
   return {
     articles: [],
   }
 },
 created () {
   axios.get('https://jsonplaceholder.typicode.com/posts')
     .then((res) => {
       this.articles = res
     })
 },
}
</script>

.then(Promise)を使わない場合
Promise使ってね！となり
うまくデータが表示できません😖💦

index.vue

<template>
 <p>{{ articles }}</p>
</template>

<script>
import axios from 'axios'
export default {
 created () {
   this.articles = axios.get('https://jsonplaceholder.typicode.com/posts')
   console.log(this.articles)
 },
}
</script>

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

こちらの記事をご覧ください👀
【Nuxt.js】Nuxt文法編：asyncData
https://wp.me/pc9NHC-ut

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

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