微前端micro-app 子应用调用父应用方法

本文主要是介绍微前端micro-app 子应用调用父应用方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

参考：micro-app官方文档

场景描述

父应用存储一套vuex数据，其中包含登录信息token等，登录信息透传给子应用使用。
当子应用中的接口返回“登录失效”时，需要清空父应用vuex中的登录相关信息，并且跳转到登录页面。

原本vuex中有一个名为 LogOut 的action（如下），正常情况直接通过this.$store.dispatch("LogOut") 触发即可。

	...// 退出系统LogOut({ commit, state }) {return new Promise((resolve, reject) => {logout(state.token).then(() => {commit('SET_TOKEN', '')commit('SET_ROLES', [])commit('SET_PERMISSIONS', [])removeToken()resolve()}).catch(error => {reject(error)})})},....

但是微前端改造之后，子应用自身没有 vuex 的实例，最后考虑通过子应用向主应用发送数据的方式实现功能，原理：

解决办法

触发条件下，子应用通过 dispatch 向父应用传递参数：

// 子应用 window.microApp.dispatch 传值
...
window.microApp.dispatch({type: 'callLogOut'})
...

父应用通过 绑定监听函数 addDataListener 监听子应用传递的数据

// 父应用监听数据变化
...
microApp.addDataListener(appName, handlerFun);
...

发现问题：父应用只能监听到一次数据变化

上述代码写好之后，项目运行，发现父应用只能监听到一次数据变化，之后再次触发该特定场景，父组件始终无法监听到数据变化，即使子应用明明触发的 dispatch。

经仔细查阅父子应用传值文档，发现：

dispatch只接受对象作为参数，它发送的数据都会被缓存下来。 micro-app会遍历新旧值中的每个key判断值是否有变化，如果所有数据都相同则不会发送（注意：只会遍历第一层key），如果数据有变化则将新旧值进行合并后发送。

例如：

// 第一次发送数据，记入缓存值 {name: 'jack'}，然后发送 
window.microApp.dispatch({name: 'jack'})

// 第二次发送数据，将新旧值合并为 {name: 'jack', age: 20}，记入缓存值，然后发送 
window.microApp.dispatch({age: 20})

// 第三次发送数据，新旧值合并为 {name: 'jack', age: 20}，与缓存值相同，不再发送
window.microApp.dispatch({age: 20})

且 dispatch是异步执行的，多个dispatch会在下一帧合并为一次执行

window.microApp.dispatch({name: 'jack'})
window.microApp.dispatch({age: 20})// 上面的数据会在下一帧合并为对象{name: 'jack', age: 20}一次性发送给主应用

解决方法

那么，有没有什么办法，不缓存参数，做到每次场景触发，子应用给父应用传值，父应用都能及时监听到并触发对应操作呢？

有，那就是 forceDispatch：强制发送

forceDispatch方法拥有和dispatch一样的参数和行为，唯一不同的是forceDispatch会强制发送数据，无论数据是否变化。

示例：

// 强制发送数据，无论缓存中是否已经存在 name: 'jack' 的值
window.microApp.forceDispatch({name: 'jack'}, () => {console.log('数据已经发送完成')
})

最终代码

// 子应用
...// 重新登录window.microApp.forceDispatch({type: 'callLogOut'})
...// 父应用
...mounted() {// 父应用中监听子应用触发的自定义事件microApp.addDataListener('app-deploy', this.subListener)},beforeDestroy() {// 移除监听microApp.removeDataListener('app-deploy', this.subListener)},methods: {subListener(data) {// 登录过期，跳转首页并退出登录if (data?.type === 'callLogOut') {this.$store.dispatch('LogOut').then(() => {location.href = '/index'})}},...}
...