微前端应用

Question

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

任何帮助都将不胜感激。

Answer 1

您可以通过三种方式共享数据：

1. URL:查询参数/路径参数(仅适用于ID、筛选器等小数据)
2. 会话存储:仅当您未导航到其他

：最方便且首选的方式时才使用此选项

当然，如果您要将状态持久化到本地存储，则必须在用户注销时自行处理状态刷新。

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

此外，当您将状态保存到本地存储时，出于性能原因，要么解除它，要么懒惰地执行它，几乎没有延迟。

在过去的两年里，我们一直在使用微前端，我们使用本地存储和会话存储的混合来完成我们的工作。幸运的是，对于我们使用Redux的所有应用程序，即使是Vue，这也允许我们使用redux-localstorage。

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

Answer 2

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

您还可以在App Shell中使用RxJS主题作为消息总线，并在微前端应用程序中订阅它。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));

这种方法不需要DB通信。

希望这能解决你的问题！

编码快乐！