Question

我有1个项目，该项目分为多个SPA，我有5个SPA，用Angular用2编写，用React 2编写，用vue js 1写。现在，我有一个集成的服务器，它将根据路由来提供不同的文件。我需要通过最少的数据库交互将数据从一个应用程序共享到另一个应用程序。这是一个微型前端的方案。希望这能解决我的问题。

任何帮助将不胜感激。

Answer 1

共有三种共享数据的方式：

URL：查询参数/路径参数（仅适用于ID，过滤器等小数据）
会话存储：仅当您不导航到其他选项卡/窗口时才使用此功能
本地存储：最方便，首选的方式

当然，如果要将状态持久保存到本地存储中，那么当用户注销时，您必须自己处理状态刷新。

这是一个痛苦的过程。您将必须编写代码来管理JSON到本地存储的序列化和反序列化。为了缓解这种情况，最好在所有微型应用程序中使用相同的状态管理解决方案。我建议使用Redux / MobX来做到这一点。但是，如果您将Redux用于React，将Ng-Rx用于Angular，将Vuex用于Vue，那么您将没有任何现成的解决方案。

此外，当您将状态保存到本地存储时，出于性能原因，可以将其反抖动或延迟不大地进行延迟。

过去两年来，我们一直在使用微前端，并且结合使用本地存储和会话存储来完成工作。幸运的是，对于所有使用Vux的应用程序，我们都使用Redux，这使我们可以使用redux-localstorage。

您也可以使用Cookies，但通常最好避免使用它们。

Answer 2

另一种选择是使用EEV之类的前端事件总线。您的应用程序外壳程序将负责创建共享事件侦听器。然后，每个微前端都可以在该共享通道上发出事件。

您还可以将RxJS主题用作App Shell中的消息总线，并在Micro Frontend Applications中进行订阅。 Here's an example

我希望能给您更多一些想法。

Answer 3

我遇到了同样的情况，我必须将数据从一个微型应用程序传递到另一个微型应用程序。经过大量的研发，我发现基于事件的通信是最好的方法，在那里我以事件对象的形式传输数据。这是一些示例：发送数据：

var event = new CustomEvent('userData', { "detail": { "id": id, ...rec } });
window.dispatchEvent(event);

用于接收其他应用程序上的数据的是：

window.addEventListener("userData", function (e: CustomEvent) {
      this.id = e.detail.id;
      this.country = e.detail.country;
      this.contact = e.detail.contact;
      this.company = e.detail.company;
      this.changeDetectorRef.detectChanges();
}.bind(this));

这种方法不需要数据库通信。

希望这可以解决您的查询！

微型前端应用

3 个答案:

快乐编码！！！