# vue3 global 변수 다루기

이번 포스팅에서는 vue3에서 전역 변수를 어떻게 다루는지 알아보겠습니다!

# 목표

  1. vue2 global 변수 다루는 법과 vue3 global 변수 다루는 방법의 차이를 알아봅니다.

  2. 간단한 변수부터 store에 접근하는 것까지 알아봅니다

  3. 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>
#vue
노경환
이 글이 도움이 되셨다면! 깃헙 스타 부탁드립니다 😊😄
최근변경일: 5/14/2022, 8:52:31 AM