微前端乾坤--实现主应用与子应用的通信（用bigfish框架通信原理）--react、vue实现应用通信（二）

该方法我在bigfish框架中用的,react和vue应该也行 原理只是将方法挂在到window上,多一个全局函数

第二种方法相对简单,直接在主应用的main.js这个文件中,将方法挂在到window上面,这样子应用就可以通过window拿到想要的属性和方法了

首先,我们先将上面那个例子的控制侧边栏的状态,保存到redux中,实现组件通信

export const namespace = 'collapsableSider';
type State = {
  collapsed: boolean;
};
export default {
  namespace,
  state: {
    collapsed: false,
  },

  reducers: {
    setCollapsed(state: State, { payload }) {
      return {
        ...state,
        collapsed: payload,
      };
    },
  },
};

然后,在主应用的main.js文件中,将修改侧边栏的方法.挂在到全局函数上

window.sdk = {
  setCollapsed: function (value) {
    getDvaApp()._store.dispatch({
      type: 'collapsableSider/setCollapsed',
      payload: value,
    });
  },
};

接下来,最简单的一步.子应用哪里需要用到,直接访问window即可

  // 进入详情页隐藏侧边栏
  useEffect(() => {
    if (window?.win?.sdk?.setCollapsed) {
      window.win.sdk.setCollapsed(true)
    }
    return (() => {
      if (window?.win?.sdk?.setCollapsed) {
        window.win.sdk.setCollapsed(false)
      }

    })
  }, [])

到这里,应用通信就完成了.当然,因为我们这是微前端项目,子应用可以单独启动.所以要做一个判断.避免如果单独启动子应用.没有对应的函数时候报错问题.