qiankun 应用之间数据传递

全局共享 initGlobalState

qiankun initGlobalState API 单击前往

qiankun 内部提供了 initGlobalState 方法用于注册 MicroAppStateActions 实例用于通信，该实例有三个方法，分别是onGlobalStateChange、setGlobalState、offGlobalStateChange。这几个方法其实看一下他们的英文就大概知道所对应做的事情了，下面直接通过一个案例演示一下

主应用注册

改造一下主应用的入口文件，下面是新加的和全局状态共享相关的。这里初始化了一个状态数据，并且将值给设置了，同时调用了监听改变，当值被改变后会触发对应回调。

补充这一段代码可以抽离为一个单独的文件（就像vue3当中单独写一个store一样，然后导出这个action），然后在你的主应用页面代码当中导入之后去通过setGlobalState改变值也是一样的（haha，这样就是在vue或者jsx当中用的咯，别突然被我这个写在入口当中的困住了）

import {registerMicroApps, start, initGlobalState} from 'qiankun';// 全局状态管理
const state = {count: 1};const action = initGlobalState(state);action.onGlobalStateChange((value, prev) => {console.log('main app change', value, prev);
});action.setGlobalState(state);

子应用获取

这里以vue3作为子应用来进行说明，同样的是对入口文件进行改造，在子应用接入qiankun的时候，我们要将对应的生命周期写上。在mount注册的时候会有一个props参数，在这个props当中就有我们所需要的全局共享对象。

let app: any;
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {createApp(App).use(router).use(ElementPlus).mount('#app');
} else {renderWithQiankun({mount(props) {app = createApp(App).use(router).use(ElementPlus);app.mount(props.container?.querySelector('#app'));console.log('vue app mount get props', props);props.onGlobalStateChange((state: any, prev: any) => console.log(`vue 子应用 [onGlobalStateChange - ${props.name}]:`, state, prev));props.setGlobalState({count: 100});},// bootstrap、update、unmount三个生命周期省略。。。。});
}

优化

在子应用当中我们也可以把这个action单独抽离出来封装一下

function emptyAction() {// 警告：提示当前使用的是空 Actionconsole.warn("Current execute action is empty!");
}class Actions {// 默认值为空 Actionactions = {onGlobalStateChange: emptyAction,setGlobalState: emptyAction};/*** 设置 actions*/setActions(actions) {this.actions = actions;}/*** 映射*/onGlobalStateChange(...args) {return this.actions.onGlobalStateChange(...args);}/*** 映射*/setGlobalState(...args) {return this.actions.setGlobalState(...args);}
}const actions = new Actions();
export default actions;

然后还是在入口文件的mount生命周期当中把props的action赋值给我们包的这个actions，也就是下面这样，然后再在其他地方用的时候导入这个actions就好了

import actions from './action.js';
actions.setActions(props);

在这里插入图片描述

观察者模式 & 发布订阅

js设计模式-观察者&发布订阅单击前往

可以利用观察者模式或者发布订阅将数据给绑定在windows下，然后进行对应的监听处理

Props传值

在主应用当中注册子应用的时候可以通过props来进行值传递

registerMicroApps([{name: 'react app', // app name registeredentry: '//localhost:7100',container: '#yourContainer',activeRule: '/yourActiveRule',// 通过这个将myData传递，子应用在mount中可以拿到这个prop里面的值props: myData}
]);