系列2：【上手】qiankun管理多个子应用—像指挥家一样管理

rabbit_it

已于 2024-09-15 17:05:10 修改

阅读量1k

点赞数 23

分类专栏： qiankun学习文章标签：前端前端框架阿里云

于 2024-09-14 18:02:06 首次发布

本文链接：https://blog.csdn.net/qq_14811655/article/details/142262675

版权

qiankun学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、引言：管理多个子应用的必要性

在微前端架构中，主应用（也称为容器应用）就像是乐团的指挥家，而子应用则是乐团中的各个乐手。当乐团规模逐渐扩大，如何管理好这些乐手，使他们的演奏协调一致，便成为了主应用的一项重要任务。今天，我们将探讨如何利用 Qiankun 来高效管理多个子应用，使它们协作无间、表现出色。

引言指挥家

二、多个子应用的路由管理——让你的乐队协同作战

2.1 路由策略选择

在微前端中，多个子应用各自有自己的路由配置。主应用需要协调这些子应用的路由，使得用户的每一次点击都能正确地展示相应的子应用页面。

2.1.1 子应用路由管理

每个子应用可以独立配置自己的路由。例如，Vue 子应用可以使用 Vue Router，React 子应用可以使用 React Router。

// Vue 子应用路由配置
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
});

// React 子应用路由配置
const App = () => (
  <BrowserRouter>
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
  </BrowserRouter>
);

2.1.2 主应用与子应用路由协作

主应用需要设置路由规则来决定何时显示哪个子应用。例如，我们可以设置主应用路由为 /vue 时加载 Vue 子应用，为 /react 时加载 React 子应用。

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'sub-app-vue',
    entry: '//localhost:7100',
    container: '#subapp-container',
    activeRule: '/vue',
  },
  {
    name: 'sub-app-react',
    entry: '//localhost:7200',
    container: '#subapp-container',
    activeRule: '/react',
  }
]);

start();

2.2 路由嵌套与动态路由

对于复杂的应用场景，可能需要路由嵌套或动态路由支持。Qiankun 可以与主应用的路由配置进行良好的配合，实现更复杂的路由需求。

// 主应用路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      children: [
        { path: 'analytics', component: Analytics },
        { path: 'reports', component: Reports }
      ]
    }
  ]
});

三、子应用间的独立运行与通信——让你的乐队成员默契配合

3.1 子应用的独立运行

每个子应用都可以独立运行，而不会受到其他子应用的影响。这种独立性是微前端架构的一大优势。

3.2 子应用间的通信

尽管子应用可以独立运行，有时它们仍需要进行通信。Qiankun 提供了几种通信方式来实现子应用之间的互动。

3.2.1 使用全局事件总线

在主应用中定义一个全局事件总线，各个子应用可以通过它来进行通信。

// 主应用中定义事件总线
const eventBus = new EventEmitter();

// 传递事件
eventBus.emit('updateData', { data: 'new data' });

// 子应用中接收事件
eventBus.on('updateData', (data) => {
  console.log(data); // { data: 'new data' }
});

3.2.2 使用 Qiankun 的 `props` 属性

主应用可以通过 props 将数据传递给子应用，子应用可以使用这些数据来实现功能。

// 主应用中传递 props
registerMicroApps([
  {
    name: 'sub-app-vue',
    entry: '//localhost:7100',
    container: '#subapp-container',
    activeRule: '/vue',
    props: { theme: 'dark', userInfo: { name: 'Alice' } },
  }
]);

// 子应用中接收 props
export async function mount(props) {
  console.log(props.theme); // dark
  console.log(props.userInfo.name); // Alice
}

四、主应用与子应用的数据共享与状态管理——保持乐队的节奏一致

4.1 主应用的状态管理

主应用需要管理一些全局状态，比如用户信息、主题设置等，并将这些状态传递给各个子应用。可以使用全局状态管理工具如 Redux 或 Vuex 来实现。

4.2 子应用的状态管理

每个子应用可以使用自己的状态管理方案，但要与主应用保持数据同步。例如，Vue 子应用可以使用 Vuex，React 子应用可以使用 Redux。

// Vue 子应用中的 Vuex 示例
const store = new Vuex.Store({
  state: {
    user: { name: 'Alice' }
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  }
});

// React 子应用中的 Redux 示例
const store = createStore((state = { user: { name: 'Alice' } }, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    default:
      return state;
  }
});