여러 Vue 애플리케이션, 여러 엔트리 파일, 동일한 Vuex/Vue3 Compostition Api 스토어 [반응성 상실]

여러 Vue 애플리케이션, 여러 엔트리 파일, 동일한 Vuex/Vue3 Compostition Api 스토어 [반응성 상실]

.cshtml Vue "mini-apps" 입니다.마이크로 프런트엔드와 클래식 SPA 사이여야 합니다.목적은 코드 베이스의 일부, 주로 의존관계를 공유하는 것입니다.의 「」를 컴파일 .chunk-vendors.jsJavascript "mini-files" 입니다.하면, 는 분할로 진행됩니다.chunk-vendors.js로딩이 느림으로써 최적화할 수 있습니다.

여기서 설명하는 문제는 2개의 루트 Vue 인스턴스가 공유 상태를 통해 서로 통신하도록 하는 것입니다.지금은 먼저 가져오거나 마운트한 앱만 비활성화 상태를 유지합니다.문제는 Vue 2 반응성 시스템/Vuex가 구체적인 Vue 인스턴스에 어떻게 결합하는가에 있다고 생각했습니다.원시적인 스토어를 도입했을 때도 상황은 똑같았습니다.

이것에 대해 혼란스러운 것은, 1개의 main.js 엔트리 파일에 2개의 애플리케이션을 인스턴스화하면, 스토어 공유가 기능하는 것입니다.이는 Vue가 일종의 숨겨진 루트 인스턴스를 만들고 있거나 구체적인 인스턴스에 바인딩된 Vuex 코드 분석 추론이 잘못되었음을 나타냅니다.

왜 안 되는지 알려주시면 감사하겠습니다.또한 회피책을 제안해 주시면 감사하겠습니다.

저는 Vue 2와 Vue 3 모두에서 컴포지션 API/primitive Store Implementation을 사용하여 복제를 만들었습니다. Vue-cli는 vue.config.json에 지정된 페이지를 사용하여 MPA 모드로 앱을 구축한 다음 루트 index.html 파일로 가져옵니다.저장소는 한 번 초기화되고 나중에 확인/로드할 수 있도록 저장됩니다.window/javascriptbundle.asp/razor만 남기고하도록 웹 .또한 개발 프록시는 스크립트 번들에 대한 경로를 제외한 모든 것을 프록시합니다.이 모든 것은 데모를 위해 제거되었습니다.

(솔루션을 찾으면 소스 링크를 특정 코드 스니펫으로 대체하고 싶습니다.)

검토 대상 옵션:

피하려고 합니다만, 항상 「코디네이터」루트 인스턴스를 실행하고, 페이지에 특정 요소가 있는지 확인해, 필요에 따라서 「미니 애플리케이션」을 컴포넌트로 로드/언로드할 필요가 있습니다.이 코디네이터에는 모듈이 있는 상태도 포함되며, 그 중 일부는 "공유"로 표시되므로 여러 "미니 앱"에서 작업을 수행할 수 있습니다(소유 플래그 검사).

sessionStorage/localStorage를 검토했습니다.문제는 '스토리지' 이벤트가 탭에서만 트리거되고 첫 번째 문서에서는 트리거되지 않는다는 것입니다.|주의커스텀 이벤트를 트리거하거나 iframe을 가지고 놀아야 합니다.너무 허접하게 느껴지긴 하지만 그건 공리일 수도 있어또한 여러 스토어 인스턴스에서 동일한 상태가 복제됩니다.

다음은 이 주제에 대해 찾은 몇 가지 관련 기사입니다.

아마도 달성하려는 목표에 가장 가까운 것: 여러 Vue 인스턴스에서 Vuex 사용

동일하지만 다른 점: Vue 마이크로 프런트 엔드 애플리케이션 구축(라우팅 및 vuex 스토어 포함)

여러 항목의 사용 사례는 같은 페이지에 공존하지 않는 하위 앱입니다.웹 컴포넌트 또는 일반 애플리케이션 번들일 수 있습니다.서로 소통할 수도 있지만, 글로벌 이벤트 버스나 서로 데이터를 주고받는 중개 앱 등 다른 것이 필요합니다.

문제는 여러 Vue 라이브러리 복사본 및/또는 여러 Vuex 스토어 인스턴스가 있다는 것입니다.는 한 앱 . 앱은 한 번만 다시 로드해야 합니다.vue ★★★★★★★★★★★★★★★★★」vuex되며 Webpack CDN lib로 될 수 .externalswindow.Vue ★★★★★★★★★★★★★★★★★」window.Vuex import Vuex도 마찬가지입니다store페이지상의 싱글톤이어야 합니다(해당 중개자를 제외).이는 허용 가능한 솔루션이지만 주로 설계상의 제약이 있어 회피책이 필요한 기존 애플리케이션에 적합합니다.

피하려고 합니다만, 항상 「코디네이터」루트 인스턴스를 실행하고, 페이지에 특정 요소가 있는지 확인해, 필요에 따라서 「미니 애플리케이션」을 컴포넌트로 로드/언로드할 필요가 있습니다.

이것은 일반적인 방법입니다.Vue 3에는 포털 vue보다 제어력이 떨어지는 텔레포트가 있습니다.제대로만 하면 애플리케이션 설계에 단점이 없습니다.포털이 이전에 등장했던 다른 프레임워크(Angular, React)에서도 마찬가지로 같은 일이 달성된다.

sessionStorage/localStorage를 고려했습니다. 문제는 '스토리지' 이벤트가 하나의 문서 내에서가 아니라 탭에서만 트리거된다는 것입니다.

이 문제는 창을 사용하여 해결합니다.postMessage그리고.message이벤트를 같은 탭에 표시합니다.이것이 단일 창으로 제한되지 않아야 하는 경우, 크로스 탭 동기화에 두 가지 모두를 사용하는 서드 파티 lib가 있을 경우, 원어민 대체 방법은 다음과 같습니다.BroadcastChannelLS보다 브라우저 지원은 적지만 탭에 대한 제한은 없습니다.

언급URL : https://stackoverflow.com/questions/69775876/multiple-vue-apps-multiple-entry-files-same-vuex-vue3compostitionapi-store-lo