플러그인의 전역 속성과 provide/inject

서비스를 노출하는 두 가지 방법

app.config.globalProperties

import axios from 'axios'

export default {
  install(app, options) {
    const http = axios.create({ baseURL: options.baseURL })
    app.config.globalProperties.$http = http
  }
}

Options API에서 $http 사용하기

export default {
  async created() {
    const res = await this.$http.get('/users')
    this.users = res.data
  },
  data() {
    return { users: [] }
  }
}

Composition API에서 this를 사용할 수 없는 이유

<script setup>
// this is undefined here, so this.$http is NOT available
// use inject() instead
</script>

플러그인에서 provide 사용하기

export const httpKey = Symbol('http')

export default {
  install(app, options) {
    const http = createHttp(options)
    app.config.globalProperties.$http = http // Options API
    app.provide(httpKey, http)               // Composition API
  }
}

Composition API에서 inject 사용하기

<script setup>
import { inject } from 'vue'
import { httpKey } from './plugins/http'

const http = inject(httpKey)
const res = await http.get('/profile')
</script>

InjectionKey로 타입이 지정된 주입 키 사용하기

import type { InjectionKey } from 'vue'
import type { AxiosInstance } from 'axios'

export const httpKey: InjectionKey<AxiosInstance> =
  Symbol('http')

// inject(httpKey) is now typed as AxiosInstance | undefined

모듈 보강으로 $http 타입 지정하기

// shims.d.ts
import type { AxiosInstance } from 'axios'

declare module 'vue' {
  interface ComponentCustomProperties {
    $http: AxiosInstance
  }
}

export {}

보강 코드가 위치할 곳

// tsconfig.json (excerpt)
{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

전역 속성은 신중하게 사용하기

두 API 모두 지원하기

install(app, options) {
  const service = build(options)
  app.config.globalProperties.$service = service
  app.provide(serviceKey, service)
}

빠른 확인

복습