微前端-qiankun-跨组件信息传递

微前端架构的一个关键特点是可以将多个独立的前端应用程序组合成一个整体，从而实现代码的复用和项目的可扩展性。同时，在这种架构下，不同的前端应用之间需要进行协作和信息交换，因此跨组件信息传递是一个重要的问题。

什么是微前端架构？

微前端架构是一种将前端应用程序拆分成多个独立的小应用，然后将它们组合成一个整体应用的架构模式。这种架构可以带来诸多好处，如代码复用、独立部署、增量升级等。而 qiankun 则是一个流行的用于实现微前端架构的工具。

在 qiankun 微前端架构中，我们可以使用全局状态管理来实现跨组件信息传递。qiankun 提供了 initGlobalState 方法来初始化全局状态，并通过 onGlobalStateChange 方法监听全局状态的变化，以及通过 setGlobalState 方法更新全局状态。

代码演示

主应用代码示例：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'subapp1',
    entry: 'http://localhost:8081',
    container: '#subapp1',
    activeRule: '/subapp1',
  },
  {
    name: 'subapp2',
    entry: 'http://localhost:8082',
    container: '#subapp2',
    activeRule: '/subapp2',
  },
]);

start();
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'subapp1',
    entry: 'http://localhost:8081',
    container: '#subapp1',
    activeRule: '/subapp1',
  },
  {
    name: 'subapp2',
    entry: 'http://localhost:8082',
    container: '#subapp2',
    activeRule: '/subapp2',
  },
]);

start();

子应用1（subapp1）代码示例：

import { initGlobalState } from 'qiankun';

const initialState = { message: 'Hello from subapp1' };
const actions = initGlobalState(initialState);

actions.onGlobalStateChange((state, prev) => {
  console.log('subapp1 global state changed', state);
});

actions.setGlobalState(initialState);

export default actions;

子应用2（subapp2）代码示例：

import { initGlobalState } from 'qiankun';

const initialState = { message: 'Hello from subapp2' };
const actions = initGlobalState(initialState);

actions.onGlobalStateChange((state, prev) => {
  console.log('subapp2 global state changed', state);
});

actions.setGlobalState(initialState);

export default actions;

在上述代码示例中，主应用通过 qiankun 的 registerMicroApps 方法注册了两个子应用，并通过 start 方法启动了整个微前端应用。在子应用中，我们使用 initGlobalState 方法初始化了全局状态，并通过 onGlobalStateChange 方法监听全局状态的变化，并通过 setGlobalState 方法更新全局状态。

在这个示例中，我们展示了如何在 qiankun 微前端架构中进行跨组件信息传递。通过这种方式，主应用和子应用之间可以实现灵活的信息交换，从而构建出更加强大和高效的微前端应用系统。