vue js 3에서 composition api 통해 전역 플러그인 등록하려면 어떻게 해야하나요???

Question

뭔가 편해보여서 이걸로 사용해 보려 하는데, 이것저것 제약이 너무 많아 불편하네요...공식문서도 뭔가 명확하지가 않고 특히 this를 사용하지 못하는게 너무 큽니다.전역으로 사용할 간단한 플러그인을 하나 만들어 사용하려고 시도해 봤는데 도저히 코드가 작동하질 않습니다.(gpt도 모른답니다... ㅜㅜ) const commonJS = { hello(str) { console.log('hello World!') } } export default { install(app) { app.config.globalProperties.$commonJS = commonJS app.provide('commonJS', commonJS) } } // 전역 js // import commonJS from './assets/common/js/common' import commonJS from './assets/common/js/common.js' const app = createApp(App) app.use(createPinia()) app.use(router) app.use(commonJS) app.mount('#app') import { reactive, getCurrentInstance, inject } from 'vue' export default { setup() { const currentInstance = getCurrentInstance() //제대로 리턴됨 consst commonJS = inject('commonJS') const testFn = () => { // null 리턴됨 const commonJS = inject('commonJS') // 의도된 대로 정상 리턴됨 const globalCommonJS = currentInstance .appContext.config.globalProperties.$commonJS } } }의문 1.install() 안에서 provide에 분명 정상적으로 값을 등록했는데, 왜 내부 함수에서는 가져올 수 없나요???의문 2.component API 안에선 this를 사용할 수 없기 때문에 getCurrentInstance()를 불러와야 한다는것 까진 이해했습니다그런데 기존 예제에서 $commonJS를 사용하려면 단순히 this.$commonJS 하면 된다고 하는 것과는 다르게굉장히 복잡하게 찾아들어가 객체를 사용해야 합니다. (심지어 자동완성도 지원되질 않습니다)꼭 이렇게 복잡하게 써야 하나요???의문3.저렇게 전역으로 가져온 플러그인은 자동완성 지원이 안되나요??현업에서는 공통 플러그인 사용할때 어떤 식으로 하는지 궁금합니다그냥 전역 플러그인 하나 만들어서 써보고 싶은데 잘 안되니 답답하네요.

Clickin · Accepted Answer

보통은 store 만들어서 쓰죠...전역에 객체 만드는 건 좋지 못한 습관이에요싱글톤 객체에서 받아오는 게 안전합니다.Pinia 써보세요

Kunie · Answer

inject 는 컴포넌트를 setup 할 때 한번 주입되기 때문입니다.setup 에서는 아직 컴포넌트 객체가 생성되기 전이기 때문입니다. Options API 에서 this 를 참조하면 컴포넌트 객체가 리턴이 되고, 그 컴포넌트 객체에서 원본 Vue 객체에 참조할 수 있었기 때문에 this.$commonJS 로 참조가 가능했던 것입니다.일단 타입스크립트를 사용합니다.

vue js 3에서 composition api 통해 전역 플러그인 등록하려면 어떻게 해야하나요???

2개의 답변

Q&A 목록