Vue.js API사용하기, props대신 mitt

- axios 라이브러리

fetch나 여러 방식이 있긴하지만 json으로 바로 바꿔주는 편리함이나 장점 때문에 react에서도 

axios를 주로 썼다. vue에도 당연히 적용되서 사용해보고 간략한 사용법을 기록한다.

npm install axios해준다음 script부분에 먼저 import를 해준다.

<script>
import axios from 'axios';

.....

그리고 methods부분에서 아래와 같이 사용하면 된다. 보통 get과 post를 많이 쓰니까 아래와 같이 사용해 보았다.

 methods:{
    apiTest(){
      axios.get('https://jsonplaceholder.typicode.com/posts?_start=0&_end=5')
      .then((result)=>{
        // get요청 성공시 실행됨
        console.log(result.data);
        this.result = result.data;
        console.log(this.result);
      }).catch(()=>{
        // 실패시 요청할 코드
        console.log('요청실패')
      })
    },
    postTest(){
      axios.post('URL','보낼데이터')
      // 데이터는 문자,object전부 가능
      .then(()=>{
        //요청 성공시 실행할코드
      }).catch(()=>{
        //실패시 실행할 코드
      })
    }
  }

- mitt : 멀리 떨어져 있는 컴포넌트간 데이트 전송

이것도 라이브러리인데 한번 사용해 보았다. 마찬가지로 npm install mitt해주고 main.js에 아래와같이 사용해준다.

import { createApp } from 'vue'
import App from './App.vue'

import mitt from 'mitt'
let emitter = mitt();
let app = createApp(App);
app.config.globalProperties.emitter = emitter;

app.mount('#app')

그리고 보내고 싶은 컴포넌트에서 아래와 같이 emit등록을 해준다.

  methods:{
    fire(){
      this.emitter.emit('전송',this.mData)
      //mData = 'kimjiwon'
    },

그리고 받고싶은곳에서 아래와 같이 받을 수 있다.

template>
    <div>
        <h1>mitt 받는곳</h1>
        {{ testData }}
    </div>
  
</template>

<script>
export default {
    name:'ReceivePage',
    data(){
        return{
            testData:'',
        }
    },
    mounted(){
        this.emitter.on('전송',(a)=>{
            console.log(a);
            this.testData = a;
        });
    },
}
</script>