# vue3 global 변수 다루기
이번 포스팅에서는 vue3에서 전역 변수를 어떻게 다루는지 알아보겠습니다!
# 목표
vue2 global 변수 다루는 법과 vue3 global 변수 다루는 방법의 차이를 알아봅니다.
간단한 변수부터 store에 접근하는 것까지 알아봅니다
composition api를 사용할 때, 옵션 api를 사용할 때로 분리해서 알아봅니다
# vue2에서 global 변수 다루기
vue2에서는 아래 코드와 같이 전역 변수를 핸들링하여 컴포넌트에서 api, store, util에 접근하였습니다.
// main.js
import Vue from "vue";
import _ from "lodash";
import store from "@store";
import axios from "@api/axios";
import api from "@api";
import utils from "@utils";
import filters from "@filters";
import router from "@router";
Vue.prototype._ = _;
Vue.prototype.moment = moment;
Vue.prototype.$api = api;
// this.$api... 형태로 모든 컴포넌트에서 사용 가능
Vue.prototype.$utils = { ...utils };
Vue.prototype.$filters = filters;
Vue.options.filters = filters;
Vue.router = router;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
# vue3에서 global 변수 다루기
vue3에서는 Vue에 변수를 다 모아 넣는 것을 금지 시켰기 때문에 따로 변수를 만들어 글로벌 변수를 선언합니다
app.config.globalProperties를 이용하여 전역 변수를 선언합니다.
import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
const app = createApp(App);
app.use(store);
app.mount("#app");
// store, foo를 글로벌 변수에 넣는 모습
app.config.globalProperties.$store = store;
app.config.globalProperties.foo = "bar";
# option api로 글로벌 변수 사용하기
vue2에서 컴포넌트 내에 글로벌 변수 사용하는 방법과 동일합니다
<template>
<div class="home"></div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "Home",
mounted() {
console.log(this.foo); // bar
}
});
</script>
# composition api로 글로벌 변수 사용하기
이 방법은 composition api 및 setup에서만 사용 가능합니다
getCurrentInstance 프로퍼티를 사용하여 접근합니다
proxy 변수는 글로벌 state를 가지고 있습니다
<template>
<div class="home">
<button @click="testFunc">inc</button>
{{ getterExample }}
</div>
</template>
<script>
import { defineComponent, onMounted, getCurrentInstance, computed } from "vue";
export default defineComponent({
name: "Home",
setup() {
const { proxy } = getCurrentInstance();
const testFunc = () => proxy.$store.commit("ModuleA/setCounter", 222);
onMounted(() => {
console.log(proxy.foo); // 'bar'
});
const getterExample = computed(
() => proxy.$store.getters["ModuleA/getterExample"]
);
return { testFunc, getterExample };
}
});
</script>
