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注入全局
  Vue.prototype.$actions = actions
  
  
  //在需要的地方监听状态的变化
  Vue.prototype.$actions.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log(state, prev);
  });
  
  
  // 在需要的地方设置状态
  Vue.prototype.$actions.setGlobalState(state);
  

  微应用：

  // 从生命周期 mount 中获取通信方法，使用方式和 master 一致
  export function mount(props) {
    if(props){
        // 将actions注入子应用全局
       Vue.prototype.$actions = actions
    }
  }
  
  //在需要的地方监听state的变化
  Vue.prototype.$actions.onGlobalStateChange((state, prev) => {
      // state: 变更后的状态; prev 变更前的状态
      console.log(state, prev);
    });
  
  // 在需要的地方设置state的变化
  Vue.prototype.$actions.setGlobalState(state);