美文网首页
5. 实践基于qiankun的微前端demo - 应用间的通讯

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

作者: 木头就是我呀 | 来源:发表于2020-05-19 21:02 被阅读0次
通讯过程 - 图片来自 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的变化。

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

相关文章

网友评论

      本文标题:5. 实践基于qiankun的微前端demo - 应用间的通讯

      本文链接:https://www.haomeiwen.com/subject/ysjiohtx.html