微前端qiankun应用间通讯

qiankun官方提供的Actions通信方式，适合业务划分清晰，比较简单的微前端应用，可以满足大部分的应用场景需求。

Actions通信原理

qiankun内部提供了initGlobalState方法用于注册MicroAppStateActions实例用于通信，该实例有三个方法，分别是：

setGlobalState：设置globalState-设置新的值时，内部将执行浅检查，如果检查到globalState发生改变则触发通知，通知到所有的观察者函数。
onGlobalStateChange：注册观察者函数-响应globalState变化，在globalState发生改变时触发该观察者函数。
offGlobalStateChange：取消观察者函数-该实例不再响应globalState变化。

Vue简单实例

主应用修改

main.js增加：

// 通讯
const actions = initGlobalState({
    mt: 'init' // 初始化state，里面内容您随意
})
// 在项目中任何需要监听的地方进行监听，在这里监听是为了方便
actions.onGlobalStateChange((state,prev)=>{
    console.log('main state change',state);
})
// 将action对象绑到Vue原型上，为了项目中其他地方使用方便
Vue.prototype.$actions = actions

// 以上代码放在设置默认app之前即可
setDefaultMountApp('one')

App.js增加修改state的方式：

<template>
  <div id="main">
    这是主应用文字
    <br>
    <button @click="changeView('/one')">子应用one</button>
    &nbsp;
    <button @click="changeView('/two')">子应用two</button>
    <br>
    <!--增加修改state的按钮-->
    <button @click="changeState('1')">修改state = 1</button>
    &nbsp;
    <button @click="changeState('2')">修改state = 2</button>
    <hr>
    <div id="micro-view"></div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    changeView(who){
      window.history.pushState(null,who,who)
    },
    changeState(value){
      // ------ 修改state
      this.$actions.setGlobalState({
        mt: value
      });
    }
  }
}
</script>

<style>
#main {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

子应用修改

main.js：

// 生命周期 - 挂载后
export async function mount(props) {
    console.log('two mount');

    // 设置主应用下发的方法
    Object.keys(props.fn).forEach(method =>{
        Vue.prototype[`$${method}`] = props.fn[method]
    })

    // 设置通讯
    Vue.prototype.$onGlobalStateChange = props.onGlobalStateChange
    Vue.prototype.$setGlobalState = props.setGlobalState

    // 渲染
    render()
}

About.vue增加通讯监听：

<template>
    <div class="about">
        this is two about
        <br>
        <button @click="testFn">测试事件</button>
        <br>
        {{'this is my name --- '+name}}
    </div>
</template>

<script>
    export default {
        name: "About",
        data() {
            return {
                name: 'init name'
            }
        },
        mounted(){
            // 增加state监听，当mt数据发生变化的时候，我们修改name，体现在页面上
            this.$onGlobalStateChange((state,prev)=>{
                if(state.mt !== prev.mt){
                    this.name = state.mt
                }
            })
        },
        methods: {
            testFn(){
                this.$show('测试事件成功')
            }
        }
    }
</script>

<style scoped></style>

世间所有的相遇，都是久别重逢

微前端qiankun应用间通讯

Actions通信原理

Vue简单实例

主应用修改

子应用修改

参考