[Vue.js] config.globalProperties 사용법

Vue.js 3.0으로 업그레이드되면서 몇몇 가지가 바뀌었는데 

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

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

import axios from 'axios';

Vue.prototype.$axios = axios;

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


// Main.vue

.
.
.
<script>
export default {
	created() {
		console.log(this.$axios);
	}
}
</script>

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

.
.
.
<script>
export default {
	created() {
		console.log(this.$axios);
		console.log(this.$foo); // bar
	}
}
</script>

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

 

참고 : v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp

 

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

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

.
.
.
<script>
import { inject } from 'vue'
export default {
	created() {
		
	},
	setup() {
		const $axios = inject('$axios');
		console.log($axios);
    }
}
</script>

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

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

( 기존의 data, method 등의 선언부 들이 setup 메소드 안으로 통합되었다.)

아직 vue.js 3.x에 대해 공부를 안 해서 많은 정보를 알진 못하지만 조금씩 기록하면서 공부를 해야겠다.