qiankun微前端主应用向子应用共享的数据没有实时更新解决

问题：

主应用通过props将store里的数据传给子应用，包括userName、token等信息；偶然会出现一个问题，通过登录页面登录系统，子应用没有及时的拿到主应用最新登录的token，当点击菜单加载子应用时，子应用请求的接口传的token还是上一次登录记录的已经失效的token,导致直接返回登录页面。

有问题的代码：

micro.js

import { registerMicroApps, start,initGlobalState } from "qiankun";
import store from "@/store";
registerMicroApps(
  [
    //需要保证 activeRule 和 entry 不同
    {
      name: "microApp1", // 子应用1
      entry: "http://localhost:9007",
      container: "#panelContainer",
      activeRule: "/micro-app1",
      props: {
        actions: initGlobalState(store.state.user)
      }
    },
    {
      name: "microApp2", // 子应用2
      entry: "http://localhost:9008",
      container: "#panelContainer",
      activeRule: "/micro-app2",
      props: {
        actions: initGlobalState(store.state.user)
      }
    },
    {
      name: "microApp3", // 子应用3
      entry: "http://localhost:9009",
      container: "#panelContainer",
      activeRule: "/micro-app3",
      props: {
        actions: initGlobalState(store.state.user)
      }
    }
  ],
  ......
  );
  export default start;

解决：

用一个方法返回props的值，确保在登录后加载页面时才获取到props的值，而不是在一开始加载静态文件时就加载了props的值，导致store的数据不是最新的。

micro.js

import { registerMicroApps, start,initGlobalState } from "qiankun";
import store from "@/store";
registerMicroApps(
  [
    //需要保证 activeRule 和 entry 不同
    {
      name: "microApp1", // 子应用1
      entry: "http://localhost:9007",
      container: "#panelContainer",
      activeRule: "/micro-app1",
      props: () => ({
        actions: initGlobalState(store.state.user)
      })
    },
    {
      name: "microApp2", // 子应用2
      entry: "http://localhost:9008",
      container: "#panelContainer",
      activeRule: "/micro-app2",
      props: () => ({
        actions: initGlobalState(store.state.user)
      })
    },
    {
      name: "microApp3", // 子应用3
      entry: "http://localhost:9009",
      container: "#panelContainer",
      activeRule: "/micro-app3",
      props: () => ({
        actions: initGlobalState(store.state.user)
      })
    }
  ],
  ......
  );
  export default start;

home.vue （引入micro.js的页面）

<template>
  <div id="panelContainer" :style="panelStyle"></div>
  <router-view></router-view>
</template>
<script setup>
import { onMounted, computed } from "vue";
import start from "../micro";
import store from "@/store";
onMounted(() => {
    if (!window.qiankunStarted) {
      window.qiankunStarted = true;
      start();
    }
  }
});
const panelStyle = computed(() => ({
     "min-width": store.state.user.toggle ? "1080px" : "1248px"
  })
);
</script>
<style lang="less" scoped>
#panelContainer {
  width: 100%;
  height: 100%;
}
</style>