Vue3 - axios 설치 및 사용

axios 설치

npm명령어를 통해 axios를 설치해준다.

npm install --save axios

axios 기본 CRUD 예제

https://www.koderhq.com/tutorial/vue/http-axios/ 예제 참고

axios 전역으로 사용법

[Vue.js] config.globalProperties 사용법

그중 하나가 main.js 에서 전역적으로 사용하는 방법이 바뀌었다.

// vue.js 2.x
// main.js

import axios from 'axios';

Vue.prototype.$axios = axios;

new Vue({
el:#app,
components: { App },
template: ''
});

// Main.vue

.
.
.

2.x 버전에선 prototype으로 선언 후 사용하였지만

이젠 달라졋다.

// vue.js 3.x
// main.js

import App from './App.vue'
import axios from 'axios';

const app = createApp(App);

app.config.globalProperties.$axios = axios; app.config.globalProperties.$foo = 'bar';

app.mount('#app');

// Main.vue

.
.
.

3.x 버전부턴 app.config.globalProperties로 전역 설정을 해줘야 가능해진다.

위의 방법 말고 또 다른 방법이 있다.

// vue.js 3.x
// main.js

import App from './App.vue'
import axios from 'axios';

const app = createApp(App);

app.provide('$axios', axios);

app.mount('#app');

// Main.vue

.
.
.

provide / inject이라는 새로운 전역 변수 설정이 생겼으며

inject 주입 시 setup() 함수에서 정의를 해야 한다.

결론 아래와 같이 바꾼다

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

// createApp(App).use(router).mount('#app')
// [앱 생성 실시]
const app = createApp(App)
// [axios / http 통신]
app.config.globalProperties.$axios = axios
// [라우터 사용 설정]
app.use(router)
// [main 아이디 : 렌더링 시작점]
app.mount('#app')

axios Async 함수 사용