唯品秀前端博客

上篇手把手教你基于微前端qiankun的应用实践(上篇)中我们已经将vue2主应用加载vue3子应用基本跑了起来,接下来本节探究下父子应用之间数据如何通信,以及子应用与子应用间通信的解决方案

应用划分

在谈到应用通信前,我们必须谈到子应用划分问题,在微前端架构中,子应用并不是一个模块,而是一个独立的应用,我们将子应用按业务划分可以拥有更好的可维护性和解耦性,子应用应该具备独立运行的能力,应用间频繁的通信会增加应用的复杂度和耦合度

因此,非必要情况下理论上我们应该是减少应用中间的交互行为,避免业务错综复杂不利于维护

Actions通信

官方提供的应用间的通信方式 - Actions 通信,这种通信方式比较适合业务划分清晰,能满足绝大多数情况通信需求,qiankun 内部提供了 initGlobalState 方法用于注册 MicroAppStateActions 实例用于通信,该实例有三个方法,分别是:

  • setGlobalState:设置 globalState。设置新的值时,内部将执行浅检查,如果检查到 globalState 发生改变则触发通知,通知到所有的观察者函数。
  • onGlobalStateChange:注册观察者函数。响应 globalState 变化,在 globalState 发生改变时触发该观察者函数。
  • offGlobalStateChange:取消观察者函数。该实例不再响应 globalState 变化。

特别说明,面对未知事物人类总是欣喜又恐惧,如果你了解类似于WebSocket订阅发布交互方式的话,你完全可以用理解WebSocket交互思维去理解qiankun的Actions通信,从而降低学习成本。onGlobalStateChange就是监听,setGlobalState就是设置字段并触发onGlobalStateChange

主应用配置

创建actions实例文件

首先,在主应用中注册一个actions实例并导出。在 main-app 项目中,新建文件 vue2/src/shared/actions.js(存放位置可自定义),代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { initGlobalState, MicroAppStateActions } from 'qiankun'
// import _store from '@/store'
// 父应用中使用initGlobalState设置全局状态actions并导出供其他组件使用
const initialState = {
  //这可以写初始化数据
  testData: '测试'
}
// 初始化
const actions = initGlobalState(initialState)

actions.onGlobalStateChange((state, prevState) => {
  console.log("主应用state变更前:", prevState);
  console.log("主应用state变更后:", state);
  // _store.commit("setData", state) // 在store存储相关数据
})
export default actions

setGlobalState设置字段testData

剩余50%内容付费后可查看
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(0) 打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"基于微前端qiankun的父子应用通信实战(下篇)"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏