使用initGlobalState(state)全局傳值

• 參數(shù)

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

• 用法

  定義全局狀態(tài)铡原，并返回通信方法量九，建議在主應(yīng)用使用黍檩，微應(yīng)用通過 props 獲取通信方法申钩。

• 返回

  • MicroAppStateActions

    • onGlobalStateChange:==監(jiān)聽數(shù)據(jù)變化==

      (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void次绘， 在當(dāng)前應(yīng)用監(jiān)聽全局狀態(tài)，有變更觸發(fā) callback撒遣，fireImmediately = true 立即觸發(fā) callback

    • setGlobalState:==改變數(shù)據(jù)==

      (state: Record<string, any>) => boolean邮偎， 按一級屬性設(shè)置全局狀態(tài)，微應(yīng)用中只能修改已存在的一級屬性

    • offGlobalStateChange: ==移除監(jiān)聽==

      () => boolean义黎，移除當(dāng)前應(yīng)用的狀態(tài)監(jiān)聽禾进，微應(yīng)用 umount 時會默認(rèn)調(diào)用

• 示例

主應(yīng)用：

import { initGlobalState, MicroAppStateActions } from 'qiankun';

// 初始化 state
const actions: MicroAppStateActions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) => {
  // state: 變更后的狀態(tài); prev 變更前的狀態(tài)
  console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange();

微應(yīng)用：

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

  props.onGlobalStateChange((state, prev) => {
    // state: 變更后的狀態(tài); prev 變更前的狀態(tài)
    console.log(state, prev);
  });

  props.setGlobalState(state);
}

優(yōu)點：可傳遞store到各子應(yīng)用

缺點：子應(yīng)用在app.ts中才比較好使用props.onChangeGlobalState之類語法

路由綁定式消費微應(yīng)用

主應(yīng)用：需要在 src/app.ts 里導(dǎo)出一個 useQiankunStateForSlave 函數(shù)廉涕，函數(shù)的返回值將作為 props 傳遞給微應(yīng)用泻云，如：

// src/app.ts
export function useQiankunStateForSlave() {
  const [globalState, setGlobalState] = useState({ str: 'aaa' })
  const [ablState, setAblState] = useState({ hh: 'kkk' })
  // 實際給子應(yīng)用調(diào)用修改state的方法  
  // 傳參和實現(xiàn)可以自定義，子應(yīng)用直接調(diào)用setGlobalState是不生效的火的，所以才需要這個額外的方法壶愤，這是一個坑  
  const setState = (str: any) => { setGlobalState({ str}) }  
  const setablState = (hh: any) => { setAblState({hh}) }  
  return { globalState, setGlobalState, setState ,ablState,setAblState,setablState};
}

• 實際給子應(yīng)用調(diào)用修改state的方法 ，傳參和實現(xiàn)可以自定義馏鹤，子應(yīng)用直接調(diào)用setGlobalState是不生效的征椒，所以才需要這個額外的方法，這是一個坑

子應(yīng)用：微應(yīng)用中會自動生成一個全局 model湃累，可以在任意組件中獲取主應(yīng)用透傳的 props 的值勃救。

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

子應(yīng)用中的改變和監(jiān)聽

const alist=masterProps.globalState.str.list
console.log(alist)
masterProps.onGlobalStateChange((state: any, prev: any) => {
state: 變更后的狀態(tài); prev 變更前的狀態(tài)
console.log(state, prev);
 });
 useEffect(() => {    masterProps.setState('bbb')  }, [])
    console.log('masterProps',masterProps)

基于 props 傳遞

類似 react 中組件間通信的方案

1. 主應(yīng)用中配置 apps 時以 props 將數(shù)據(jù)傳遞下去（參考主應(yīng)用運行時配置一節(jié)）

   // 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,
           },
         },
       ],
     };
   });
   

2. 子應(yīng)用在生命周期鉤子中獲取 props 消費數(shù)據(jù)（參考子應(yīng)用運行時配置一節(jié)）