하위 Vue 프로젝트를 상위 Vue 프로젝트에 포함시키고 상위 Vue 스토어에 액세스합니다.

하위 Vue 프로젝트를 상위 Vue 프로젝트에 포함시키고 상위 Vue 스토어에 액세스합니다.

한 페이지(루팅 없음)의 Vue 앱을 사용하고 있습니다.이 페이지에는 공백이 있습니다.div컨테이너와 나는 이것을 채우고 싶다.div여러 외부 Vue 애플리케이션 중 하나가 포함된 컨테이너입니다.이러한 외부 앱에는 한 페이지만 포함됩니다(루팅 없음).문제는 부모 프로젝트에서 Vuex를 사용하고 있으며 포함된 자식 프로젝트가 이 Vuex 스토어에 액세스해야 한다는 것입니다.

그럼 제가 이루고 싶은 게 뭘까요?관리자는 커스텀 순서로 렌더링할 페이지 큐를 설정할 수 있습니다.마지막 페이지 뒤의 다음 페이지는 큐의 첫 페이지를 다시 렌더링합니다.

각 큐는 커스터마이즈 가능하지만 적어도1개의 커스텀페이지를 포함해야 합니다.API는 부모 프로젝트에게 "이번에는 이 큐를 렌더링해야 합니다: 페이지 7, 페이지 3, 페이지 24, 페이지 5"라고 지시하고 부모 프로젝트는 자녀 프로젝트(페이지)를 그 div에 포함시키려고 합니다.이러한 하위 프로젝트/페이지들은 서로 완전히 독립적이지만 모두 상위 프로젝트로부터 글로벌 상태를 조작해야 합니다.

각 자녀 프로젝트(페이지)를 외부 프로젝트/리포지토리로 유지하면 부모 프로젝트가 커스텀 페이지에 대해 알 필요가 없기 때문에 좋다고 생각했습니다.새로운 페이지를 디자인할 수 있습니다.그들이 알아야 할 것은 상위 Vuex 스토어에 대한 참조뿐입니다.

이 문제를 해결할 방법이 있나요?더 필요한 정보가 있으면 알려주세요!

---

내가 지금까지 알고 있는 것:

사용방법iframe태그:

URL을 통해 다른 Vue 앱을 내장할 수 있지만, 외부 프로세스로 실행해야 합니다.또한 상위 프로젝트 Vuex 스토어에서 하위 프로젝트 및 그 반대로 통신을 작성해야 합니다.

각 하위 프로젝트는 구성 요소입니다.

독자적인 컴포넌트(아마 npm)를 생성하여 부모 프로젝트에 등록할 수 있습니다.그러나 그 후, 독자적인 컴포넌트 레지스트리를 설정할 필요가 있습니다(우리 회사는 유료 npm 레지스트리를 사용하지 않습니다).또한 새로운 자녀 프로젝트를 작성할 때는 부모 프로젝트를 재구축해야 합니다. 왜냐하면 부모 프로젝트는 각 자녀 프로젝트에 대해 알아야 하기 때문입니다.구성 요소는 상위 Vuex 저장소에 대해 알아야 합니다.동적 컴포넌트를 사용할 수 있습니다.<component :is="currentComponent"></component>

하위 프로젝트를 상위 프로젝트의 div 요소에 마운트:

어떻게 해야 할지 모르겠어요.자녀 프로젝트에서는 부모 Vuex 스토어에 대해 알아야 합니다.

마이크로프런트엔드 사용:

위와 같습니다.

---

저는 기본적인 프로젝트, 재현 단계부터 시작했습니다.

상위 프로젝트:

새로운 프로젝트 "부모 프런트 엔드"를 생성하여 Vuex를 추가합니다.생성된 저장소 파일(/store/index.js)은 다음과 같습니다.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    theGlobalValue: "value accessed by everyone"
  },
  getters: {
    theGlobalValue: state => state.theGlobalValue
  },
});

다음으로 App.vue 파일을 업데이트합니다.

<template>
  <div id="app">
    <div>{{ theGlobalValue }}</div>
    <div id="page"></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["theGlobalValue"])
  }
};
</script>

#page div에 마운트해야 하는 하위 프로젝트:

새 프로젝트 "자녀 프런트 엔드"를 만듭니다.상위 프로젝트 저장소에 액세스하려면 Vuex가 필요할 수 있습니다. 아직 확실하지 않습니다.App.vue 파일 업데이트 대상

<template>
  <div id="app">
    <div>{{ theGlobalValue }}</div>
  </div>
</template>

언급URL : https://stackoverflow.com/questions/60152826/embed-child-vue-project-into-parent-vue-project-and-access-parent-vuex-store