在微前端架構(gòu)中，我們應(yīng)該按業(yè)務(wù)劃分出對(duì)應(yīng)的子應(yīng)用，而不是通過(guò)功能模塊劃分子應(yīng)用。這么做的原因有兩個(gè)：

1. 在微前端架構(gòu)中，子應(yīng)用并不是一個(gè)模塊，而是一個(gè)獨(dú)立的應(yīng)用，我們將子應(yīng)用按業(yè)務(wù)劃分可以擁有更好的可維護(hù)性和解耦性。
2. 子應(yīng)用應(yīng)該具備獨(dú)立運(yùn)行的能力，應(yīng)用間頻繁的通信會(huì)增加應(yīng)用的復(fù)雜度和耦合度。

綜上所述，我們應(yīng)該從業(yè)務(wù)的角度出發(fā)劃分各個(gè)子應(yīng)用，盡可能減少應(yīng)用間的通信，從而簡(jiǎn)化整個(gè)應(yīng)用，使得我們的微前端架構(gòu)可以更加靈活可控。

介紹兩種通信方式

1. 第一種是 qiankun 官方提供的通信方式 - Actions 通信，適合業(yè)務(wù)劃分清晰，比較簡(jiǎn)單的微前端應(yīng)用，一般來(lái)說(shuō)使用第一種方案就可以滿足大部分的應(yīng)用場(chǎng)景需求。
2. 第二種是基于 redux 實(shí)現(xiàn)的通信方式 - Shared 通信，適合需要跟蹤通信狀態(tài)，子應(yīng)用具備獨(dú)立運(yùn)行能力，較為復(fù)雜的微前端應(yīng)用。

通信原理

qiankun 內(nèi)部提供了 initGlobalState 方法用于注冊(cè) MicroAppStateActions 實(shí)例用于通信，該實(shí)例有三個(gè)方法，分別是：

1. setGlobalState：設(shè)置 globalState - 設(shè)置新的值時(shí)，內(nèi)部將執(zhí)行 淺檢查，如果檢查到 globalState 發(fā)生改變則觸發(fā)通知，通知到所有的 觀察者 函數(shù)。
2. onGlobalStateChange：注冊(cè) 觀察者 函數(shù) - 響應(yīng) globalState 變化，在 globalState 發(fā)生改變時(shí)觸發(fā)該 觀察者 函數(shù)。

3. offGlobalStateChange：取消 觀察者 函數(shù) - 該實(shí)例不再響應(yīng) globalState 變化。

   
   
   image.png

我們從上圖可以看出，我們可以先注冊(cè) 觀察者 到觀察者池中，然后通過(guò)修改 globalState 可以觸發(fā)所有的 觀察者 函數(shù)，從而達(dá)到組件間通信的效果。

主應(yīng)用的工作

首先，我們?cè)谥鲬?yīng)用中注冊(cè)一個(gè) MicroAppStateActions 實(shí)例并導(dǎo)出，代碼實(shí)現(xiàn)如下：

// micro-app-main/src/shared/actions.ts
import { initGlobalState, MicroAppStateActions } from "qiankun";

const initialState = {};
const actions: MicroAppStateActions = initGlobalState(initialState);

export default actions;

在注冊(cè) MicroAppStateActions 實(shí)例后，我們?cè)谛枰ㄐ诺慕M件中使用該實(shí)例，并注冊(cè) 觀察者 函數(shù)，我們這里以登錄功能為例，實(shí)現(xiàn)如下：

// micro-app-main/src/pages/login/index.vue
import actions from "@/shared/actions";
import { ApiLoginQuickly } from "@/apis";

@Component
export default class Login extends Vue {
  $router!: VueRouter;

  // `mounted` 是 Vue 的生命周期鉤子函數(shù)，在組件掛載時(shí)執(zhí)行
  mounted() {
    // 注冊(cè)一個(gè)觀察者函數(shù)
    actions.onGlobalStateChange((state, prevState) => {
      // state: 變更后的狀態(tài); prevState: 變更前的狀態(tài)
      console.log("主應(yīng)用觀察者：token 改變前的值    為 ", prevState.token);
      console.log("主應(yīng)用觀察者：登錄狀態(tài)發(fā)生改變，改變后的     token 的值為 ", state.token);
    });
  }

  async login() {
// ApiLoginQuickly 是一個(gè)遠(yuǎn)程登錄函數(shù)，用于獲取 token，詳見 Demo
const result = await ApiLoginQuickly();
const { token } = result.data.loginQuickly;

// 登錄成功后，設(shè)置 token
actions.setGlobalState({ token });
  }
}

---------------未完-----------