Skip to main content

应用间通信

通过 @ice/stark-data 这个包可以很简单的实现应用间通信，比如全局切换语言微应用响应的场景。@ice/stark-data 支持状态共享和事件监听响应两种方式。

store#

API#

  • get(key) 从 store 中获取变量
  • set(key, value) 设置/初始化 store 中的变量
  • on(key, callback, force) 注册变量监听事件，其中 force 为 boolean 类型，true 则表示初始化注册过程中，会强制执行一次
  • off(key, callback) 删除已经注册的变量监听事件

示例#

使用场景：

  1. 中英文切换，切换按钮在主应用，监听事件在微应用
  2. 获取全局的登录用户信息

在主应用存储/设置信息：

// 主应用
import { store } from '@ice/stark-data';
const userInfo = { name: 'Tom', age: 18 };
store.set('language', 'CH'); // 设置语言
store.set('user', userInfo); // 设置登录后当前用户信息
setTimeout(() => {
store.set('language', 'EN');
}, 3000);

在微应用中响应/获取数据：

// 微应用
import { store } from '@ice/stark-data';
// 监听语言变化
store.on('language', (lang) => {
console.log(`current language is ${lang}`);
}, true);
// 获取当前用户
const userInfo = store.get('user');

event#

api#

  • on(key, callback) 注册回调函数，回调函数的入参通过 emit 注入，如 ...rest
  • off(key, callback) 删除已经注册的回调函数
  • emit(key, ...rest) 触发已经注册的函数，支持入参

示例#

主应用顶部有消息展示入口，微应用内有阅读消息的能力，阅读完消息后需要通知主应用刷新消息展示信息。

在主应用中监听事件：

// 主应用
import { event } from '@ice/stark-data';
event.on('freshMessage', () => {
// 重新获取消息数
});

在微应用中触发事件：

// 微应用
import { event } from '@ice/stark-data';
event.emit('freshMessage');

props
2.0.0+
#

icestark 还支持通过 props 将主应用数据传递给微应用。

示例#

主应用向微应用统一注入用户信息。

在主应用中通过 props 配置用户信息。

// src/App.jsx
import { AppRouter, AppRoute } from '@ice/stark';
const App = () => {
return (
<AppRouter>
<AppRoute
name="waiter"
activePath="/waiter"
title="商家平台",
props={{
userId: 'xxxxx'
}}
url={[
'https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-waiter-vue/dist/js/app.js',
'https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-waiter-vue/dist/css/app.css',
]}
/>
...
</AppRouter>
);
}

微应用可以通过生命周期函数获取到该数据：

export function mount({ container, customProps }) {
ReactDOM.render(<App { ...customProps } />, props.container);
}

其他#

对于主应用和微应用，运行时都共享了当前页面的 location、Cookie、LocalStorage、window 等全局信息，因此应用间的通信，也可以通过这些方案很简单的实现。

Edit this page