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

微应用：

// 从生命周期 mount 中获取通信方法，使用方式和 master 一致
export function mount(props) {

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

  props.setGlobalState(state);
}

优点：可传递store到各子应用

缺点：子应用在app.ts中才比较好使用props.onChangeGlobalState之类语法

路由绑定式消费微应用

主应用：需要在 src/app.ts 里导出一个 useQiankunStateForSlave 函数，函数的返回值将作为 props 传递给微应用，如：

// src/app.ts
export function useQiankunStateForSlave() {
  const [globalState, setGlobalState] = useState({ str: 'aaa' })
  const [ablState, setAblState] = useState({ hh: 'kkk' })
  // 实际给子应用调用修改state的方法  
  // 传参和实现可以自定义，子应用直接调用setGlobalState是不生效的，所以才需要这个额外的方法，这是一个坑  
  const setState = (str: any) => { setGlobalState({ str}) }  
  const setablState = (hh: any) => { setAblState({hh}) }  
  return { globalState, setGlobalState, setState ,ablState,setAblState,setablState};
}

实际给子应用调用修改state的方法，传参和实现可以自定义，子应用直接调用setGlobalState是不生效的，所以才需要这个额外的方法，这是一个坑

子应用：微应用中会自动生成一个全局 model，可以在任意组件中获取主应用透传的 props 的值。

import { useModel } from 'umi';
   
function MyPage() {
  const masterProps = useModel('@@qiankunStateFromMaster');
  return <div>{ JSON.strigify(masterProps) }</div>;
}

子应用中的改变和监听

const alist=masterProps.globalState.str.list
console.log(alist)
masterProps.onGlobalStateChange((state: any, prev: any) => {
state: 变更后的状态; prev 变更前的状态
console.log(state, prev);
 });
 useEffect(() => {    masterProps.setState('bbb')  }, [])
    console.log('masterProps',masterProps)

基于 props 传递

类似 react 中组件间通信的方案

主应用中配置 apps 时以 props 将数据传递下去（参考主应用运行时配置一节）

// src/app.js
   
export const qiankun = fetch('/config').then(config => {
  return {
    apps: [
      {
        name: 'app1',
        entry: '//localhost:2222',
        props: {
          onClick: event => console.log(event),
          name: 'xx',
          age: 1,
        },
      },
    ],
  };
});

子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节）

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

使用initGlobalState(state)全局传值

路由绑定式消费微应用

基于 props 传递

推荐阅读更多精彩内容