[Vue] Vue 정리하기(10) - Pinia, axios

오늘은 pinia 안에서 axios 쓰는 방법에 대해 알아보자

(사실 뭐 vuex 말고 pinia에서 axios 쓴다고 달라질 거는 거의 없다)

 

먼저 axios를 사용하기 위해서는 당연히 먼저 설치를 해줘야 한다

터미널에서 npm install axios 를 해주고

 

main.js 혹은 main.ts에 

app.config.globalProperties.$axios = axios를 추가해 준다

 

참고로 나는 TMDB에서 인기 영화를 가져와 보겠다

 

TMDB에서 API 사용하는법은 다른 블로그나 문서도 많으니 찾아보시길

 

쨌뜬 스토어에서

const getMovieData = () => {
    axios({
      method: "get",
      url: "https://api.themoviedb.org/3/movie/popular?language=en-US&page=1",
      headers: {
        Authorization:
        //자신의 api 키
 
      },
    })
    .then((data) => {
      console.log(data)
    })

    .catch((err) => {
      console.log(err)
    })
  }

인기 영화를 가져와서 성공하면 데이터를 콘솔창에서 출력하게 만들어 보았다

저렇게 하면 getMovieData 라는 action을 하나 만든것이다

 

그리고 컴포넌트에서 사용할 때는 저번시간에 actions 사용법에서 배웠듯

<template>
    <div>{{count}}</div>
    <div>{{doubleCount}}</div>
  
    <v-btn @click="getMovie">영화데이터 가져오기</v-btn>
</template>
<script lang="ts" setup>
    
    import { byeWorldStore } from '@/store/byeworld';
    import { storeToRefs } from 'pinia';
    const store = byeWorldStore()
    const { count, doubleCount } = storeToRefs(store)
    const getMovie = () => {
        store.getMovieData()
    }

</script>
<style lang="">
    
</style>

이런식으로 하면 되고

저번시간에 이어서 작성하느라 필요 없는것들이 있긴 있는데

'영화데이터 가져오기'라는 버튼과 getMovie라는 함수에 집중하면 된다

 

 

이러한 화면에서 영화데이터 가져오기 버튼을 누르면

 

다음과 같이 콘솔창에 데이터가 잘 출력되는것을 볼 수 있다

 

 

오늘은 정말 기본적으로 axios를 사용해서 데이터를 가져오는 것을 해보았다

근데 이렇게 까지만 하면 타입스크립트를 쓰는 이유가 딱히 없기 때문에

다음시간에는 타입스크립트를 적용? 해보는 방법에 대해 알아보겠다