javascript - 将子 Vue 项目嵌入父 Vue 项目并访问父 Vuex 存储

Question

我有一个只有一页的 Vue 应用程序（没有路由）。在这个页面上有一个空div容器，我想div用多个外部 Vue 应用程序之一填充这个容器。这些外部应用程序也将仅包含一页（无路由）。问题是我的父项目使用了 Vuex，而嵌入的子项目必须访问这个 Vuex 商店。

那么我想要达到什么目的呢？管理员能够设置页面队列以按自定义顺序呈现。最后一页之后的下一页将再次渲染队列的第一页。

每个队列都是可自定义的，但它必须至少包含一个自定义页面。API 会告诉父项目“这次你必须渲染这个队列：第 7 页、第 3 页、第 24 页、第 5 页”，并且父项目会尝试将这些子项目（页面）嵌入到该 div 中。这些子项目/页面彼此完全独立，但它们都应该从父项目操纵全局状态。

我认为将每个子项目（页面）保留为外部项目/存储库会很好，因为这样父项目就不必知道这些自定义页面。我可以设计新页面，而他们所知道的只是对父 Vuex 商店的引用。

任何想法如何解决这个问题？如果您需要更多信息，请告诉我！

---

到目前为止我知道的事情：

使用iframe标签：

我可以通过 URL 嵌入其他 Vue 应用程序。但随后我将不得不将这些作为外部进程启动。此外，我必须创建从父项目 Vuex 商店到子项目的通信，反之亦然。

每个子项目都是一个组件：

我可以创建自己的（可能是 npm）组件并将它们注册到我的父项目中。但随后我将不得不设置我自己的组件注册表（我的公司不会使用付费的 npm 注册表）。在创建新的子项目时，我必须重建父项目，因为它必须了解每个子项目。该组件需要了解父级 Vuex 存储。我可以利用动态组件<component :is="currentComponent"></component>

将子项目挂载到父项目的 div 元素中：

不知道该怎么做。子项目需要了解父级 Vuex 存储。

使用微前端：

和上面一样。

---

我从一个基本项目开始，重现步骤：

父项目：

创建一个新项目“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
  },
});

接下来更新 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 中的子项目：

创建一个新项目“child-frontend”。您可能需要 Vuex 来访问父项目商店，我还不确定。将 App.vue 文件更新为

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

标签： javascriptvue.jsiframevuexmicro-frontend