[Vue3] Composition API 전역 변수 파일 분리

 

내가 하고 싶은 것

1. 글로벌 전역 변수 파일 분리

2. Composition API에서 사용가능 하도록!

 

 

 

Vue3 공식문서를 보면 

전역으로 사용가능한 global API가 있다.

바로 app.config.globalProperties 이다.

https://vuejs.org/api/application.html#app-config-globalproperties

Application API | Vue.js

 

 

근데 공식문서에서 전역변수를 this를 사용해서 불러오고 있다..(Options API만 설명되어 있음..)

 

 

사용한 방법

 

구글링을 통해서 2가지 방법을 찾았다.

두 방법 모두 provide, inject를 사용했다.

두 방법의 차이점은 provide, inject를 어느 파일에서 하는지의 차이인 것 같다!

https://vuejs.org/guide/components/provide-inject.html 

Provide / Inject | Vue.js

 

 

 

---

방법 1

 

1.  src/commonGlobal/global.ts 파일 생성하고

전역으로 사용 할 변수, 함수, 오브젝트 등을 작성한다.

// global.ts

export default {
  testValue: 'hyeppy',
  TestFc(a, b) {
    return a + b;
  },
  testObject: {
    key1: 'value1',
    key2: 'value2',
  },
};

 

 

2. main.ts에서 global.ts를 사용할 수 있도록 provide한다.

나는 vue 프로젝트 생성 시 plugin이 분리되어있어 src/plugins/index.ts에 작성했다.

/**
 * plugins/index.ts
 *
 * Automatically included in `./src/main.ts`
 */

// Plugins
import vuetify from './vuetify';
import pinia from '../store';
import router from '../router';
import AOS from 'aos';
import 'aos/dist/aos.css';

// Types
import type { App } from 'vue';

// Global
import global from '@/commonGlobal/global'; // 1. global.ts import하기

export function registerPlugins(app: App) {
  app.use(vuetify).use(router).use(pinia);

  app.provide('global', global); // 2. provide로 사용할 global 제공하기

  app.mixin({
    created() {
      AOS.init({
        duration: 500,
      });
    },
  });
}

/**
 * main.ts
 *
 * Bootstraps Vuetify and other plugins then mounts the App`
 */

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

// Composables
import { createApp } from 'vue';

// Plugins
import { registerPlugins } from '@/plugins';

const app = createApp(App);

registerPlugins(app);

app.mount('#app');

 

 

 

 

3. 컴포넌트에서 사용하기

<template>
  <div class="main">
    main입니다.
  </div>
</template>

<script lang="ts" setup>
import { inject } from 'vue';

const global: any = inject('global'); // 글로벌 주입하기!

console.log(global.testValue);

let result = global.TestFc(1, 2);
console.log(result);

console.log(global.testObject);
</script>

 

결과!

 

 

---

 

방법 2

 

 

방법은 1번과 거의 동일하다.

각 파일에서 어떻게 작성되었는지 비교해보자!

 

1.  src/commonGlobal/global.ts 파일 생성하고

전역으로 사용 할 변수, 함수, 오브젝트 등을 작성한다.

// global.ts

const injectionKey = Symbol('GlobalInjection'); // provide 할 때 key가 필요함. key는 문자열 or Symbol

export const global = {
  install(app) { // main.ts에서 use를 사용하기 위해서 install 사용
    const globalValue = {
      testValue: 'hyeppy',
      testObj: {
        key1: 'value1',
        key2: 'value2',
      },
      TestFc: function (a, b) {
        return a + b;
      },
    };

    app.provide(injectionKey, globalValue);
  },
};

export const useGlobal = () => {
  return inject(injectionKey);
};

 

 

 

 

2. main.ts에서 global.ts를 사용할 수 있도록 provide한다.

나는 vue 프로젝트 생성 시 plugin이 분리되어있어 src/plugins/index.ts에 작성했다.

/**
 * plugins/index.ts
 *
 * Automatically included in `./src/main.ts`
 */

// Plugins
import vuetify from './vuetify';
import pinia from '../store';
import router from '../router';
import AOS from 'aos';
import 'aos/dist/aos.css';

// Types
import type { App } from 'vue';

// Global
import { global } from '@/commonGlobal/global';

export function registerPlugins(app: App) {
  app.use(vuetify).use(router).use(pinia).use(global);

  app.mixin({
    created() {
      AOS.init({
        duration: 500,
      });
    },
  });
}

 

 

 

 

3. 컴포넌트에서 사용하기

<template>
  <div class="main">
    main입니다.
  </div>
</template>

<script lang="ts" setup>
import { useGlobal } from '@/commonGlobal/global';

const globalValue: any = useGlobal();

console.log(globalValue.testValue);
console.log(globalValue.testObj);
let result = globalValue.TestFc(1, 2);
console.log(result);

</script>

 

결과

 

 

---

결론

방법1은 main.ts에서 provide를 사용하고, 컴포넌트에서 inject 했다.

방법2는 provide, inject 모두 global.ts에서 작성했다.

 

어떤게 더 좋은방식인지는 모르겠지만,

나는 개인적으로 방법2가 로직을 분리할 수 있는 것 같아서

방법2를 사용하려고 한다!

 

좋은 방법 있으면 공유해주세용🩷

 

 

 

 

+ vue3를 처음해보는데 A-Z까지 하나하나 찾아가면서 배우는 과정이 아주 피곤하면서도 재밌다,,ㅎㅎ