[Vue] 전역 변수 사용하기 (#1)

 

• 아래는vue3 에서 script setup 방식으로 전역변수를 사용하는 예제 입니다.

 

전역변수 설정

---

• case 1

  • provide 를 사용하여 전역변수를 설정하는 방법.
  • file: main.js

      ...
  
    const appTitle = 'hello nobody'
  
    const app = createApp(app)
    .provide('$title', appTitle)
  
    .mount('#app')

 

• case 2

  • config.globalProperties 를 사용하는 방식으로 provide 와 동일하게 vue3 에서 전역 애플리케이션 인스턴스에 속성을 추가할 수 있는 기능.

  • file: main.js

    ...
    
    const appTitle = 'hello nobody'
    
    const app = createApp(app)
    
    ...
    app.config.globalProperties.$title = appTitle
    
       ... 
    ``
    
    

 

전역변수 사용

---

• case 1

  • inject 방식을 사용하는 방법. 일반적이며 간략하기 때문에 추천하는 방법.

    <script setup>
      import { inject, ref } from 'vue'
    
      const title = inject('$title')
        console.log(title)
    
      ...
    
    </script>

 

• case 2

  • getCurrentInstance 방식을 사용하는 방법. proxy 인스턴스를 호출하여 사용하는 방법.

    <script setup>
      import { getCurrentInstance, ref } from 'vue'
    
      const { proxy } = getCurrentInstance()
      console.log(proxy.$title)
    
      ...
    
    </script>