本文主要是介绍微前端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'})}},...}
...这篇关于微前端micro-app 子应用 调用父应用方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
