window.microApp = [
  {
    name: 'micro-app', // 唯一值。建议和 package.json 中的 name 一致
    entries: {
      dev: '//localhost:8081/', // 开发环境
      product: '//xxx.xxx.x.xxx:8104/vue3-backstage-micro-app/', // 线上
    },
    container: '#micro-app', // 容器 ID
    activeRule: getActiveRule('#/vue'), // 激活路径
    props: {
      id: 'props 传值方式'
    },
  },
];

1.2 微应用中获取 props

微应用在 qiankun 框架的 mount 生命周期里，可以获取 props

由于在 mount 生命周期里，调用了 render() 函数，所以在 render 中要定义接收 props 的参数

function render(props?: any) {
  console.log(props?.id);
}
...

// 生命周期
....
export async function mount(props): Promise<void> {
  render(props);
}
...

打印结果：

2. initGlobalState(state)

2.1 基本使用说明

initGlobalState() 是 qiankun 提供的通信 API

API 说明 - qiankunhttps://qiankun.umijs.org/zh/api#initglobalstatestate

2.1.1 参数

state - Record<string, any> - 必选

2.1.2 用法

定义全局状态，并返回通信方法，建议在主应用使用，微应用通过 props 获取通信方法

2.1.3 返回（返回 MicroAppStateActions 实例）

在当前应用监听全局状态，有变更触发 callback，fireImmediately = true 立即触发 callback

onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void

按一级属性设置全局状态，微应用中只能修改已存在的一级属性

setGlobalState: (state: Record<string, any>) => boolean

移除当前应用的状态监听，微应用 umount 时会默认调用

offGlobalStateChange: () => boolean

2.1.4 官方示例

主应用：

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();

微应用：

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

  props.setGlobalState(state);
}

2.2 initGlobalState(state) 通信原理

qiankun 内部提供了 initGlobalState 方法，用于注册 MicroAppStateActions 实例

MicroAppStateActions 实例包含了三个用于应用通信的方法：

onGlobalStateChange：注册观察者函数 - 响应 globalState 变化，在 globalState 发生改变时触发该观察者函数。
setGlobalState：设置 globalState - 设置新的值时，内部将执行浅检查，如果检查到 globalState 发生改变则触发通知，通知到所有的观察者函数【深度监听的】
offGlobalStateChange：取消观察者函数 - 该实例不再响应 globalState 变化

综上所述：

每个应用都可以注册观察者到观察者池中
每个应用都可通过修改 globalState，触发所有的观察者函数，实现应用通信

3. 实战

场景：主应用登录后，需要给各个微应用传递登录后获得的 token

3.1 主应用

3.1.1 注册 MicroAppStateActions 实例

import {
  registerMicroApps,
  start,
  initGlobalState
  MicroAppStateActions,
} from 'qiankun';

....

// 注册微应用通信示例
const initialState = {};
const actions: MicroAppStateActions = initGlobalState(initialState);

export {
  start, // 导出 qiankun 的启动函数
  actions, // 导出通信示例
}

3.1.2 使用 MicroAppStateActions 实例

在登录页面中，使用 3.1.1 定义的 MicroAppStateActions 实例：

注册观察者函数：actions.onGlobalStateChange((state, prevState) => { ... })
触发观察者函数：actions.setGlobalState({ ... })【深度监听的】

<template>
  <button @click="handleLogin">登录</button>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import { actions } from '@/hooks/micro-app';

export default defineComponent({
  name: 'Login',
  setup() {
    onMounted(() => {
      /**
       * 注册一个观察者函数
       * @param state 变更后的状态
       * @param prevState: 变更前的状态
       */
      actions.onGlobalStateChange((state, prevState) => {
        console.log("主应用观察者：token 改变前的值为 ", prevState.token);
        console.log("主应用观察者：token 改变后的值为 ", state.token);
      });
    });

    /**
     * 点击登录
     */
    const handleLogin = () => {
      // 登录成功后，设置 token
      actions.setGlobalState({ token: new Date() });
      ...
    };

    return {
      handleLogin,
    };
  }
})
</script>

3.2 微应用

在 3.1 中，主应用内获取的 token 已经被记录在了 globalState 中，接下来要在微应用中获取它

3.2.1 在 main.ts 中接收参数

function render(props?: any) {
  if (props) {
    /**
     * 注册一个观察者函数
     * @param state 变更后的状态
     * @param prevState: 变更前的状态
     */
    props.onGlobalStateChange(
      (state: { token: any }, prevState: { token: any }) => {
        // state: 变更后的状态; prevState: 变更前的状态
        console.log("微应用观察者：token 改变前的值为 ", prevState.token);
        console.log("微应用观察者：token 改变后的值为 ", state.token);
      }
    );
  }
}

// 生命周期
export async function mount(props): Promise<void> {
  render(props);
}

3.2.2 在实际业务相关的 .vue 文件中使用参数

第一步：新建 /hooks/actions.ts，存放全局使用通信的实例方法

function emptyAction(...args: any[]) {
  // 警告：提示当前使用的是空 Action
  console.warn("Current execute action is empty!");
}

class Actions {
  // 默认值为空 Action
  actions = {
    onGlobalStateChange: emptyAction,
    setGlobalState: emptyAction,
  };

  /**
   * 设置 actions
   */
  setActions(actions: {
    onGlobalStateChange: () => void;
    setGlobalState: () => void;
  }) {
    this.actions = actions;
  }

  /**
   * 映射
   */
  onGlobalStateChange(...args: any[]) {
    return this.actions.onGlobalStateChange(...args);
  }

  /**
   * 映射
   */
  setGlobalState(...args: any[]) {
    return this.actions.setGlobalState(...args);
  }
}

const actions = new Actions();
export default actions;

第二步：在入口文件引入 /hooks/actions.ts ，并为其注入真实 Actions

function render(props?:any) {
  if (props) {
    // 注入 actions 实例
    actions.setActions(props);
  }
	...
}

// 生命周期
export async function mount(props): Promise<void> {
  render(props);
}

第三步：在需要用到通信参数的 vue 页面里，引入 /hooks/actions.ts，并进行监听

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import actions from "@/hooks/actions"; // 引入

export default defineComponent({
  setup() {
    onMounted(() => {
      /**
       * 注册一个观察者函数
       * @param state 变更后的状态
       * @param prevState: 变更前的状态
       */
      actions.onGlobalStateChange(
        (state: { token: any }, prevState: { token: any }) => {
          console.log("微应用观察者：token 改变前的值为 ", prevState.token);
          console.log(
            "微应用观察者：token 改变后的值为 ",
            state.token
          );
        }
      );
    });
  },
});
</script>

打印结果：