🎈 이 기사는 WP 전용입니다
htps //wp. 메 / pc9 HC-CV

전치

평가판 API의 JSONplaceholder를 사용하여
놀자 ⚡️🎸



제목을 표시하고,
클릭으로 ID에 맞춘
동적 링크를 할 🌟

데이터는 여기를 사용합니다 💡
htps : // j 그런 p ぁ세호 l에서 r. ty 피코로. 코 m/포 sts

axios, asyncData, nuxt-link 등
복습할 수 있는 것이 많이 😉❤️
할 수있는 곳은 할 필요가 없기 때문에
동동 날려주세요 ✈️⛅️

뭐야 이거… 🤦‍♂️
라는 분은 과거의 해설 기사를 봐 주세요👀

【Nuxt.js】axios 도입편:간단・간단 API 통신
htps //wp. 메 / pc9 HC-gr

Let's try!

Step1: axios로 데이터 가져오기

우선 axios를 사용하여
데이터 가져오기📥
데이터를 얻을 수 있다면 좋기 때문에
ul>li없이 {{articles}}에서
쉽게 쓰자 ...!

axios를 설치합니다.

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

그럼 코드를 써 봅시다!

ticktack…

할 수 있었습니까? 💡
코드를 보자!

코드

정답 코드①

axios로 get하는 것 뿐입니다 💡
Promise가 필요한 비동기 통신이므로
asyncData()에 기재합니다✍️
콘솔은 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()에 대해서는 이쪽
htps //wp. 메 / pc9 HC-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
htps //wp. 메 / pc9 HC - t

Step2: ul>li로 외형을 정돈한다

🎈 자세한 내용은 WP에서 확인하세요 👀
htps //wp. 메 / pc9 HC-CV