(vue3,ts 가 적용된 환경에서 작성함)
※개인적인 생각이 많이 들어갔고 혹시나 틀린 정보가 있을수 있음 그런건 댓글에 적어주시길!
오늘 해볼거는 제목 그대로 Provide, Inject를 사용해서 전역에서 변수, 함수를 가져다 쓰는것을 해보겠다
vue2에서는 app.appContext.config.globalProperties 를 사용해서 보통 전역변수를 사용했는데
내가 찾아본 바로는 vue3에서는 저걸 쓰는게 좀 어려운?
아니면 그쪽 부분이 deprecated 된것 같기도 하고
무튼 그래서 전역변수 사용하는거를 Provide, Inject를 사용해보려 한다
물론 여기서도 store에 여러 값들을 저장해 놓을수도 있지만
내 지극히 개인적인 생각으로는 store에는 값이 변하는 것들을 위주로 넣어주면 좋을것 같고
그렇지 않고 상수처럼 가져다가 쓰기만 할 것들은 Provide, Inject를 사용하여 전역에서 사용하면 좋을 것 같다
https://ko.vuejs.org/guide/components/provide-inject.html
Provide(제공) / Inject(주입) | Vue.js
ko.vuejs.org
공식문서는 여기있고 설명이 잘 나와있다
그 중에서도 앱 수준의 provide 이쪽을 참고하면 좋을것 같다
저기 예시에는 간단하게 string 하나를 provide 해서 사용하는 예시가 있는데
만약 함수도 전역으로 사용하고싶다면? 배열은? 숫자는? 섞은거는??
전역으로 사용할 변수가 몇개 없다면 그냥 가볍게 몇개 provide로 넘기면 되지만
정말 많은 전역변수,함수 등이 있다면 어떡할가??
그래서 내가 생각해낸 방법은 아예 그 변수,함수들만 모아놓은 파일을 하나 만들어서
그걸 전역에 뿌리는 방법을 생각했다
먼저 프로젝트를 만들어주고
(참고로 나는 npm create vuetify로 뷰티파이가 적용된 프로젝트를 만들었다)
global.ts 파일을 src 폴더 하위에 만들어 줬다
global.ts
export default {
test1: 'test1111',
test2: 'test2222',
testFunction() {
console.log("함수도가능?")
},
testArray: [1111,2222,3333,4444],
testObject: {
key1: 'value1',
key2: 'value2',
}
}여러 타입들의 변수와 함수를 넣어줬다
그리고 플러그인 쪽에서 저 global.ts를 불러와서 provide 해줄거다
(vuetify로 프로젝트를 생성하면 main.ts에서 plugins 폴더에 있는 index.ts에 있는 플러그인을 가져다가 적용한다
그렇지 않다면 그냥 main.ts에 추가해주면된다)
index.ts
// Plugins
import { loadFonts } from './webfontloader'
import vuetify from './vuetify'
import pinia from '../store'
import router from '../router'
import global from '@/global'
// Types
import type { App} from 'vue'
export function registerPlugins (app: App) {
// const global = Symbol() as InjectionKey<object>
app.provide('global',global)
loadFonts()
app
.use(vuetify)
.use(router)
.use(pinia)
global.ts를 불러와서
app.provide('global', global) 이렇게 앱 전체에 provide 해줬다
그리고 HelloWorld 컴포넌트에 와서
<template>
<div>
<div>
전역변수가즈아
</div>
</div>
</template>
<script lang="ts" setup>
import { inject } from 'vue';
const global: any= inject('global')
console.log(global.test1)
global.testFunction()
console.log(global.testArray[1])
console.log(global.testObject)
</script>
이렇게 작성해서 global에 있는 여러 변수와 함수를 출력해 줬다
그러면 콘솔창에
이렇게 잘 출력되는것을 확인할 수 있다
근데 여기서 문제는
컴포넌트에서
const global : any = inject('global')
이렇게 가져왔는데
any타입을 넣어주지않으면 여러 에러를 만날 수 있다
any를 넣으면 그냥 에러도 안나고 잘 출력되지만
any를 사용하면 뭔가 찝찝한 느낌?
근데 아직 저거의 해결책은 찾지 못했다
혹시나 해결책을 찾는다면 추가하도록 하겠다
부디 도움이 되셨기를~~