gasInjection-project/src/qiankun/state.ts

/**
 *公共数据
 */
import { initGlobalState } from 'qiankun';
import { store } from '/@/store';
import { router } from '/@/router';
import { getToken } from '/@/utils/auth';

let actions;

//定义传入子应用的数据
export function getProps() {
  return {
    data: {
      publicPath: '/',
      token: getToken(),
      store: store,
      router,
      isMounted: false,
    },
    actions: getActions(),
  };
}

/**
 * 定义全局状态，并返回通信方法,在主应用使用，微应用通过 props 获取通信方法。
 * @param state 主应用穿的公共数据
 */
export function initGlState(
  info: any = { token: '', userInfo: {}, isMounted: false, locationObj: null, locationId: '', pageObj: null, widthScale: 1, heightScale: 1 }
) {
  if (actions) return;
  // 初始化state
  actions = initGlobalState(info);
  // 设置新的值
  actions.setGlobalState({
    token: getToken(),
    isMounted: false,
    pageObj: {},
    widthScale: 1,
    heightScale: 1,
    url: {},
  });
  // 注册 观察者 函数 - 响应 globalState 变化，在 globalState 发生改变时触发该 观察者 函数。
  actions.onGlobalStateChange((newState, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.info('newState', newState);
    console.info('prev', prev);
    for (const key in newState) {
      console.info('onGlobalStateChange', key);
    }
  });
}

export function getActions() {
  if (!actions) initGlState();
  return actions;
}