【微服务】前端微服务qiankun 2.x主子应用通信代码片段

主应用代码

主应用工程里面源代码新建qiankun/index.js，通信代码如下：

import { initGlobalState } from "qiankun";
import store from '@/store'// 主应用与微应用数据通信
const state = {subappClassName: '' // 设置子应用打包根的class类名
}
const actions = initGlobalState(state);actions.setGlobalState(state);actions.onGlobalStateChange((state, prev) => {const { subappClassName } = state;store.dispatch('setSubappClassName',subappClassName);})
export {actions
};

在主应用实例里面调用方式：

<script>
import actions from '@/qiankun'// 导入actions实例
export default {created() {actions.setGlobalState({subappClassName: 'subapp'}); // 通过setGlobalState改变全局状态}
}
</script>

子应用代码

在子应用源代码utils/qiankun.js添加如下代码：

class Actions {static empty() {console.warn('current actions is empty!')}actions = {onGlobalStateChange: Actions.empty,setGlobalState: Actions.empty}/** 初始化设置actions**/setActions(actions) {this.actions = actions;}onGlobalStateChange(...args) {return this.actions.onGlobalStateChange(...args);}setGlobalState(...args) {return this.actions.setGlobalState(...args);}
}export default new Actions();

在main.js入口文件引入actions实例，并在mount生命周期中导入该实例，代码如下：

import actions from '@/utils/qiankun';
export async function mount(props) {actions.setActions(props);actions.setGlobalState({ subappClassName: 'sub-root-app' }); // 可在mount中设置，也可在实例里设置render(props);
}

在vue路由页面调用：

<script>
import actions from '@/utils/qiankun.js';
export default {created() {actions.setGlobalState({subappClassName: 'sub-root-app'});}
}
</script>