[JavaScript知识库]微前端qiankun框架子应用主和应用之间通信方法

子应用主应用间如何通信

qiankun官方提供了actions通信，qiankun内部使用initGlobalState(state)定义全局状态，该方法执行后返回一个MicroAppStateActions实例，实例中包含三个方法，分别是onGlobalStateChange、setGlobalState、offGlobalStateChange。

MicroAppStateActions
onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void //在当前应用监听全局状态，有变更触发 callback，fireImmediately = true 立即触发 callback
setGlobalState: (state: Record<string, any>) => boolean， //按一级属性设置全局状态，微应用中只能修改已存在的一级属性（就是用来修改全局状态的
offGlobalStateChange: () => boolean  //移除当前应用的状态监听，微应用 umount 时会默认调用

实战：父子应用之间相互通信：

==第一步：==首先需要在父应用中使用initGlobalState设置全局状态actions并导出供其他组件使用。

src/action.js:

// 此action文件为定义微应用之间全局状态
// 引入qiankun的应用间通信方法initGlobalState
import { initGlobalState, MicroAppStateActions } from 'qiankun'

const initialState = {
    // 这里可以写初始化数据

}
const actions = initGlobalState(initialState) //初始化state

// 监听actions全局公共状态数据的变化
actions.onGlobalStateChange((state, prevState) => {
    console.log("主应用变更前：", prevState);
    console.log("主应用变更后：", state);
    this.$store.commit("setProject", state) //将获取的最新的公共状态保存到vuex中
})

export default actions

==第二步：==然后在main.js中引入actions实例并在注册子应用时通过props传递全局状态actions：

main.js

// 注册的应用列表
const apps = [
  // 子应用vue应用
  {
    name: 'vueApp',  //应用名字
    // 默认请求的url，并解析里面的js，因为此时父应用请求了子应用里面的资源，所以子应用必须支持跨域
    entry: "http://localhost:8001",
    //容器名，子应用挂载到哪个元素
    container: "#container",
    //路由匹配激活规则，当路由匹配到activeRule时，就会请求获取entry资源，然后渲染到container容器中
    activeRule: '/vue',
    // 通过props实现通信传递值
    props: { actions, msg: "w" }   //向子应用传递创建的全局状态
  }
]

第三步：

主应用中的组件要修改全局状态actions，就在此组件中引入actions实例

Home.vue:

<template>
  <div class="home">
    <button @click="handle1">点击向子应用发送消息</button>
    <button @click="handle2">点击向子应用发送消息</button>
    <p>当前显示的项目：{{ project }}</p>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue"; //引入的HelloWorld组件
import actions from "../action";

export default {
  name: "Home",
  data() {
    return {
      mes1: {
        project_id: "项目1",
      },
      mes2: {
        project_id: "项目2",
      },
    };
  },
  computed: {
    project() {
      return this.$store.state.project_id;
    },
  },
  mounted() {
    // 需要在mounted钩子函数中注册qiankun的观察者函数
    // 注册一个观察者函数
    // 一旦修改actions的内容就会触发这个onGlobalStateChange监听函数
    actions.onGlobalStateChange((state, prevState) => {
      // state为变更后的状态，prevState为变更前的状态
      console.log("主应用观察者，改变前的state为：", prevState);
      console.log("主应用观察者，改变后的state为：", state);
    });
  },
  methods: {
    handle1() {
      actions.setGlobalState(this.mes1); //修改全局的actions
      this.$router.push("/vue"); //跳转到vue子应用中
    },
    handle2() {
      actions.setGlobalState(this.mes2); //修改全局的actions
      this.$router.push("/vue"); //跳转到vue子应用中
    },
  },

  components: {
    HelloWorld, //注册组件
  },
};
</script>

第四步：配置子应用的全局状态Actions，子应用中的全局状态必须要跟主应用中的全局状态变量属性名相同，比如主应用中全局状态变量为{project_id: “项目2”}，则子应用中也需要保证在setGloabalState时也需要设定相同的变量名。

先在子应用中配置一个空的actions实例为以后重新赋值从主应用中传递过来的actions：

actions.js

function emptyAction() {
    // 警告：提示当前使用的是空 Action
    console.warn("Current execute action is empty!");
}

// 我们首先设置一个用于通信的Actions类

class Actions {
    actions = {
        onGlobalStateChange: emptyAction,
        setGlobalState: emptyAction
    }
    constructor() {

    }
    // 默认值为空Action

    // 设置actions
    setActions(actions) {
        this.actions = actions
    }

    // 映射
    onGlobalStateChange(...args) {
        return this.actions.onGlobalStateChange(...args)
    }
    // 映射
    setGlobalState(...args) {
        return this.actions.setGlobalState(...args)
    }
}

const actions = new Actions()
export default actions

然后在mounted的生命周期里注入actions实例：

main.js

function render(props) {
  if (props) {
    actions.setActions(props)
  }
  const { container } = props
  // 渲染的时候赋值
  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount(container ? container.querySelector("#app") : '#app') //这里是挂载到自己的html中，基座会拿到这个挂载后的html，将其插入进去
}

子应用向主应用发送数据（子应用中修改数据，可以在主应用中监听到）

子应用的组件Home.vue：

<template>
  <div class="home">
    <button @click="handle">快点我向父应用发送数据</button>
    <p>{{ msg }}</p>
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import actions from "../actions";
export default {
  name: "Home",
  data() {
    return {
      msg: "2",
    };
  },
  mounted() {
    // console.log("cccc");
    // console.log(actions);
    actions.onGlobalStateChange((state) => {
      console.log("我是子应用，我检测到数据了：", state);
      this.msg = state;
    }, true); //onGlobalStateChange的第二个参数设置为true，则会立即触发一次观察者函数
  },
  methods: {
    handle() {
      actions.setGlobalState({ project_id: "项目520" });
    },
  },

  components: {
    HelloWorld,
  },
};
</script>