5. 实践基于qiankun的微前端demo - 应用间的通讯

通讯过程 - 图片来自 https://copyfuture.com/blogs-details/202005081811485997t11iknpwvmgnnc

🤖 修改主应用，提供通讯

1. 修改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')

1. 修改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>

🤖 修改子应用

1. 修改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()
}

1. 修改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>

1. 查看运行效果

运行效果

达到效果，主应用修改state，会触发到所有监听，所以，子应用的监听就被触发到，就得到效果。
其中通讯方向不仅仅局限在“主子应用”，对于“子主应用”，“子子应用”都可以的，在观察者池里，每个人都可以很轻松的触发和监听state的变化。

对于微前端的简单应用到这里，另外对于一些深层次的、以及其他框架的接入还没有过多的实践，相信实践后会继续更新😉。

最后编辑于：2020.05.19 21:05:37