如何在单spa中跨不同微应用共享数据

问题描述

我了解在使用 single-spa 时如何将自定义道具传递给不同的微应用，但我想知道如何获取 api 调用表单 app1 的输出并在 app2 中使用它。 app1 正在使用 react-redux，app2 将使用 react hooks。

import {registerapplication,start} from 'single-spa'


registerapplication(
    'navBar',// Name of this single-spa application
    () => import('./nav/navbar.app.js').then(module => module.navBar),() => true
)

registerapplication(
  'app1',// Name of this single-spa application
  () => import('./root.app.js'),//loadingFunction,// Our loading function
  () => true,//activityFunction // Our activity function
)

registerapplication(
    'app2',// Name of this single-spa application
    () => import('./app2/app2.app.js').then(module => module.app2),location =>
        location.pathname === '/app2' ||
        location.pathname.startsWith('/app2'),{
        some: 'value',}
)

start()

或者我如何调用根 API 调用并在所有微应用之间共享输出。上面是我的 index.js，它被 webpack 调用。

我使用的是 single-spa 版本 4.x 和 webpack 4.x

解决方法

Sharing application state 在 single-spa 中是使用 a utility module pattern 创建的“服务”实现的，该服务可以使用 cross-microfrontend imports 在您的所有微前端之间共享。

其中一个示例是使用 Rxjs 跨多个前端共享登录状态，您可以在此处找到：https://github.com/filoxo/single-spa-example-rxjs-shared-state 免责声明：我编写了此示例。