微服务架构qiankun主应用和子应用通信

前两篇主要讲述qiankun集成vue和react子应用，这篇文章讲述主应用和子应用的通信。这里就贴一下官网的例子

主应用

import { initGlobalState, MicroAppStateActions } from 'qiankun';

// 初始化 state
const actions: MicroAppStateActions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log(state, prev);
});
actions.setGlobalState(state);

//这个是卸载监听，如果需要一直监听的话就不用写
actions.offGlobalStateChange();

官网用的ts，如果自己用的是js，可以把上面代码中的类型定义去掉

微应用

// 从生命周期 mount 中获取通信方法，使用方式和 master 一致
export function mount(props) {
  props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log(state, prev);
  });

  props.setGlobalState(state);
}

微应用可以监听state的值，如果主应用变更了可以监听到改变，微应用通过setGlobalState来改变state状态值。

我的demo的处理方式是，在mount函数里通过onGlobalStateChange方法监听state的值变化，然后在render函数里面可以再做一个监听，这样在微应用在其他地方就可以通过消息总线来触发state的修改，一下是我在vue3项目里面的

例子，由于vue3不支持$on和$emit实例方法，所以这里的消息总线用的是mitt。

//渲染函数
function render(props = {}) {
  const { container } = props;
  router = createRouter({
    history: createWebHistory(
      window.__POWERED_BY_QIANKUN__ ? "/app-vue/" : "/"
    ),
    routes: routers,
  });

  if (container) {
    //qiankun框架时避免和其他的dom冲突，限制查找范围
    mountNode = container.querySelector("#app");

    //定义与主应用的通信监听
    eventBus.on("qiankunMessage", (msg) => {
      props.setGlobalState({
        ...msg,
      });
    });
  } else {
    mountNode = "#app";
  }

  instance = createApp(App);
  instance.config.globalProperties.$bus = eventBus;
  instance.use(store).use(router).mount(mountNode);
}
。
。
。
。
。
。

export async function mount(props) {
  console.log("[vue] props from main framework", props);
  props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log(11, state, prev);
  });

  render(props);
}

其他地方调用，直接通过获取当前实例获取mitt创建的消息总线实例，调用emit方法来触发上面在render方法里面定义的监听。

<template>
  <div>
    <div>页面1</div>
    <div @click="postMessage">与主应用通信</div>
  </div>
</template>

<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

function postMessage() {
  proxy.$bus.emit("qiankunMessage", { attr: 3 });
}
</script>

到这里大致就基本完成qiankun主应用和微应用之间的通信。