微前端应用

Question

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

任何帮助将不胜感激。

Answer 1

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

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

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

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

此外，当您将状态保存到本地存储时，出于性能原因，可以对其进行去抖操作或延迟执行，延迟很少。

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

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