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')

• 2. 修改App.js，增加修改state的方式

修改子应用

• 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()
}

• 2. 修改About.vue，增加通讯监听

• 3. 查看运行效果

运行效果

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

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