umi 通信数据

[jackieli123723]

主应用生产数据 在src/app.ts中导出一个函数useQiankunStateForSlave，这个函数返回的内容会注入到props中传递给子应用。这里有个坑，useState返回的setXXX方法不能命名为setGlobalState，不然会在mount阶段被qiankun的另一个同名函数覆盖。

// src/app.ts
export function useQiankunStateForSlave() {
const [globalState, setQiankunGlobalState] = useState({ str: 'aaa'})

  return {
    globalState,
    setQiankunGlobalState
  };
}

如果主应用也需要用到这个globalState的话，也可以在组件中借助useModel访问@@qiankunStateForSlave:

const { globalState } = useModel('@@qiankunStateForSlave');

子应用消费数据 子应用通过useModel访问@@qiankunStateFromMaster这个model以获取主应用传过来的props

export default () => {
  const masterProps = useModel('@@qiankunStateFromMaster');

  useEffect(() => {
    masterProps.setQiankunGlobalState({ str: 'bbb' })
  }, [])

  return (
    <p>{JSON.stringify(masterProps.globalState)}</p>
  );
}

这样，主应用负责管理globalState，子应用也能取到globalState并调用masterProps上的方法来通知主应用修改globalState

DEMO:

// 主应用传递子应用
export function useQiankunStateForSlave() {
  const [masterState, setMasterState] = useState({
    name:'JACKIELI',
    age:'28'
  });
  return {
    masterState,
    setMasterState,
  };
}

//主应用使用
// const { masterState,setMasterState} = useModel('@@qiankunStateForSlave') || {};

// 子应用中使用
// const { masterState,setMasterState} = useModel('@@qiankunStateFromMaster') || {};