Vue에 제공된 Vuex에서 인스턴스/서비스에 액세스(Vue.js 3)

Vue에 제공된 Vuex에서 인스턴스/서비스에 액세스(Vue.js 3)

배경

다음을 고려하십시오.

// app.js
import API from 'utils/API';

const api = new API(config.app.urls.api, endpoints, token);

app.provide('$api', api);

내가 지난 24시간 동안 읽은 모든 것을 바탕으로, 위의 내용은 Vue.js 3에 '서비스'를 제공하는 권장 방법이다.

그러나 위의 문제는 메서드를 Vue 구성 요소 외부에서 사용할 수 없기 때문에 API 인스턴스에 액세스할 수 없다는 것이다.

따라서 API 인스턴스를 Vuex 모듈로 가져오려면...

질문

Vue 구성요소 외부에 제공된 서비스에 액세스하는 '개안된' 방법이 있는가?아니면 내가 제안한 해결책 중 하나가 어떻게 해야 하는가?

가능한 해결 방법

제안 솔루션 1

Vue에 서비스를 제공하는 대신 다음과 같은 글로벌 속성에 서비스를 추가하면 된다.

// app.js
app.config.globalProperties.$api = api;

매장에서 그렇게 접근할 수 있을 겁니다

// some-vuex-module.js
import { getCurrentInstance } from 'vue';

const api = getCurrentInstance().appContext.config.globalProperties.$api;

내 앱에서 어떤 것에 위 내용을 사용하고 있는데 API 서비스에서는 이런 식으로 하는 것이 잘못된 것 같아.

제안 솔루션 2

내가 생각한 또 다른 해결책은 API 인스턴스를 다음과 같이 창에서 사용할 수 있게 하는 것이었다.

// app.js
import API from 'utils/API';

const api = window.api = new API(config.app.urls.api, endpoints, token);

app.provide('$api', api);

위 내용은 반패턴적인 것 같지만...

모듈 환경에서 선호되는 방법(Vue 3 설정은 일반적으로)은 그냥 가져오는 것이다.api구성 요소 내부 또는 외부와 상관없이 사용되는 장소

Vue 글로벌 속성을 가진 솔루션은 Vue 애플리케이션이 반드시 모듈화되지 않았기 때문에 Vue 인스턴스에 글로벌 애플리케이션 범위로 의존할 때 시작되었다.현재는 주로 템플릿에 사용되며 이를 수입·노출하기 위해 보일러플레이트 코드가 필요한 부동산에만 적합하다.그 예는$t에vue-i18n.

에 대한 해결책provide/inject종속성 주입이 필요한 경우에 사용할 수 있다.일반적인 경우는 의존성이 느슨하게 결합되어야 하는 도서관이다.또 다른 하나는 종속성은 구성요소 계층에 따라 달라지며 구성요소마다 다를 수 있다는 것이다.

에 대한 해결책window응용 프로그램이 공통 JS 모듈을 통해 상호 작용할 수 없는 별도의 스크립트로 분할되지 않는 한 피해야 한다.그때도 문제는 글로벌 변수를 정의하는 스크립트가 이를 사용하는 스크립트보다 먼저 로드되어야 한다는 것이다.

참조URL: https://stackoverflow.com/questions/70607332/access-instance-service-from-vuex-that-was-provided-to-vue-vue-js-3