umi之qiankun全局传值的三种解决方案

使用initGlobalState(state)全局传值

• 参数

  • state - Record<string, any> - 必选

• 用法

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

• 返回

  • MicroAppStateActions

    • onGlobalStateChange:监听数据变化

      (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void， 在当前应用监听全局状态，有变更触发 callback，fireImmediately = true 立即触发 callback

    • setGlobalState:改变数据

      (state: Record<string, any>) => boolean， 按一级属性设置全局状态，微应用中只能修改已存在的一级属性

    • offGlobalStateChange: 移除监听

      () => boolean，移除当前应用的状态监听，微应用 umount 时会默认调用

• 示例

主应用：

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

微应用