一、問題背景

　　當主應用登入後，再進去微應用發現還需要登入，相當於登入狀態沒有同步。

二、解決方案 —— 主應用與微應用通訊

　　qiankun微前端應用間的通訊，我們要利用qiankun框架的initGlobalState和MicroAppStateActionsapi，相關的api介紹如下：

（1）setGlobalState：設定globalState- 設定新的值時，內部將執行淺檢查，如果檢查到globalState發生改變則觸發通知，通知到所有的觀察者函式。

（2）onGlobalStateChange：註冊觀察者函式 - 響應globalState變化，在globalState發生改變時觸發該觀察者

（3）offGlobalStateChange：取消觀察者函式 - 該例項不再響應globalState變化。

　　所以承接上篇，我們需要改造一下兩個專案：

1、首先是主應用的micros/index.js

import {  
    registerMicroApps,  
    addGlobalUncaughtErrorHandler,  
    start,  
    initGlobalState // 新增
} from "qiankun";

const state = {} 
const actions = initGlobalState(state);

export {  actions }
 

2、以上新增了並匯出了actions，然後去到login.vue —— 登入之後通知所有微應用去同步登入狀態


import { actions } from "@/micros"; //新增

const login = () => {      
  if (username.value && password.value) {  
    store.commit("setToken", "123456");        
    // 新增
    actions.setGlobalState({globalToken: "******"});        
    router.push({path: 
 
"/"});
  }
};

　　引入actions並新增了actions.setGlobalState方法，通知所有微應用

3、然後是子應用的 main.js —— 主要是需要增加監聽方法


function render(props) {  
  console.log("子應用render的引數", props) 
  // 新增 
  props.onGlobalStateChange((state, prevState) => {    
    // state: 變更後的狀態; prev 變更前的狀態    
    console.log("通訊狀態發生改變：", state, prevState);    
    // 這裡監聽到globalToken變化再更新store
    store.commit('setToken', '******')  }, true); 
   // 掛載應用  
  instance = new Vue({    
    router,    
    store,    
    render: (h) => h(App),  
  }).$mount("#micro-app");
}

　　在render方法中我們加上onGlobalStateChange，並且第二位引數置為true，這樣微應用一啟動的時候，我們馬上就可以看到剛剛設定的 globalToken：******

　　這樣經過改造之後，我們重新整理重新登入主應用，然後點選微應用的選單，可以看到微應用就不需要再登入了。