【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…

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

コード

正解コード①

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

) pages

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

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

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

</template>

import axios from 'axios'

export default {

asyncData () {

return axios.get('https://jsonplaceholder.typicode.com/posts')

.then((res) => {

return { articles: res.data }

})

}

</script>

正解コード②

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

) pages

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

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

</template>

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

) pages

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

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

</template>

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使ってね！となり
うまくデータが表示できません😖💦

) pages

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

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

</template>

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

<template>
  <ul class="ul">
    <li
      v-for="(article, index) in articles"
      :key="index"
    >
      {{ article.title }}
    </li>
  </ul>
</template>

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

<li

v-for="(article, index) in articles"

:key="index"

</li>

</ul>

</template>

import axios from 'axios'

export default {

async asyncData () {

const res = await axios.get('https://jsonplaceholder.typicode.com/posts')

console.log(res.data)

return { articles: res.data }

}

</script>

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

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

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

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

ticktack…

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

ディレクトリ

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

コード

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

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

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

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

) pages

<template>
  <ul class="ul">
    <li
      v-for="(article, index) in articles"
      :key="index"
    >
      <nuxt-link :to="'/article/' + article.id">
        {{ article.title }}
      </nuxt-link>
    </li>
  </ul>
</template>

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

<li

v-for="(article, index) in articles"

:key="index"

<nuxt-link :to="'/article/' + article.id">

</nuxt-link>

</li>

</ul>

</template>

import axios from 'axios'

export default {

async asyncData () {

const res = await axios.get('https://jsonplaceholder.typicode.com/posts')

console.log(res)

return { articles: res.data }

}

</script>

) pages

<template>
  <p>params: {{ $route.params.id }}</p>
</template>

<p>params: {{ $route.params.id }}</p>

</template>

完成です🤗 🎉🎀

まとめ

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

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