如何解决如何在单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 免责声明:我编写了此示例。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。