UmiJs - qiankun主子应用之间，数据的传递

一. 主应用中数据的发出

import { initGlobalState } from 'qiankun';
// 主要通过 setGlobalState 来将对象放入到主子应用共通的一个全局State中。
const { setGlobalState } = initGlobalState({});
// 案例
setGlobalState({
 userName: window.atob(userName),
 age: 10,
});

二. 子应用中数据的接收

import React, { useState, useEffect } from 'react';
// 需要用到 useModel 来获取主应用中传递的数据
import { useModel } from 'umi';

// 获取主子应用之间传递的参数
const getMainSubProps = () => {
  // 名字是固定的 @@qiankunStateFromMaster
  const masterProps = useModel('@@qiankunStateFromMaster');
  // 你可以用一个State去存储，这样别的地方只用引入这个getMainSubProps组件，拿到返回的结果即可。
  const [ name, setUserName ] = useState<string>([]);

  useEffect(() => {
  	// 这里要加 ? 的，防止空指针异常
    masterProps?.onGlobalStateChange((state: any) => {
      const { userName ,age } = state;
      if(userName){
		setUserName(userName);
	  }
    });
  }, []);

  return { name };
};

export default getMainSubProps;

子应用中，只需要写一个基础组件即可，避免重复监听。监听到了更新值即可。其他页面上若需要使用这个组件，伪代码如下：

import getMainSubProps from 'xxx';
const {age,name} = getMainSubProps();