встроить дочерний Vue проект в родительский Vue проект и получить доступ к родительскому хранилищу Vuex

Question

У меня есть приложение Vue с одной страницей (без маршрутизации). На этой странице есть пустой контейнер div, и я хочу заполнить этот контейнер div одним из нескольких внешних приложений Vue. Эти внешние приложения также будут содержать только одну страницу (без маршрутизации). Проблема в том, что мой родительский проект использует Vuex, а встроенные дочерние проекты должны получить доступ к этому магазину Vuex.

Так чего я хочу достичь? Администратор может настроить очередь страниц для отображения в произвольном порядке. Следующая страница после последней страницы снова отобразит первую страницу очереди.

Каждая очередь настраивается, но она должна содержать одну пользовательскую страницу по крайней мере. API сообщит родительскому проекту «на этот раз вы должны отобразить эту очередь: страница 7, страница 3, страница 24, страница 5», и родительский проект попытается встроить эти дочерние проекты (страницы) в этот div. Эти дочерние проекты / страницы полностью независимы друг от друга, но все они должны манипулировать глобальным состоянием из родительского проекта.

Я думал, что было бы хорошо сохранить каждый дочерний проект (страницу) в качестве внешнего проекта / хранилища. потому что тогда родительский проект не должен знать об этих пользовательских страницах. Я мог бы создать новые страницы, и все, что им нужно знать, - это ссылка на родительский магазин Vuex.

Есть идеи, как решить эту проблему? Пожалуйста, дайте мне знать, если вам нужна дополнительная информация!

---

Вещи, которые я узнал до сих пор:

Использование тега iframe:

Я могу вставлять другие Vue приложения через URL. Но тогда я должен был бы запустить их как внешние процессы. Далее мне нужно создать связь из хранилища Vuex родительского проекта с дочерним проектом и наоборот.

Каждый дочерний проект является компонентом:

Я мог бы создать свой собственные (возможно npm) компоненты и зарегистрировать их в моем родительском проекте. Но тогда мне придется настроить свой собственный реестр компонентов (моя компания не будет использовать платный реестр npm). И при создании нового дочернего проекта мне пришлось бы перестраивать родительский проект, потому что он должен знать о каждом дочернем проекте. Компонент должен знать о родительском хранилище Vuex. Я мог бы использовать динамические c компоненты <component :is="currentComponent"></component>

Монтирование дочернего проекта в элемент div родительского проекта:

Не уверен, как это сделать , Дочерний проект должен знать о родительском хранилище Vuex.

Использование микрофронтов:

То же, что и выше.

---

Я начал с базовый c проект, шаги для воспроизведения:

Родительский проект:

Создайте новый проект "parent-frontend" и добавьте в него 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
  },
});

Затем обновите файл приложения. 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 для доступа к хранилищу родительского проекта, я пока не уверен. Обновите файл приложения. vue до

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