乾坤通讯方式

66 阅读2分钟

通讯:父应用于子应用,子应用之间

需要通讯例子:在父应用登录了,在子应用需要拿到登录信息

通信方式

  1. 本地存储的方式获取:localStorage

    • 浏览器是分域名的,在同域下才能获取本地存储数据

    • 乾坤中子应用最终会打包成静态资源,放在父应用中加载,所以域名一致

  2. 采用乾坤提供全局对象(数据容器)来提供数据,每个应用都可以从这个同期中获取数据

    • 乾坤官方推荐方式

全局通信开发步骤

  1. 在父应用中定义一个全局状态池,将数据存储到状态池

  2. 在子应用中注册一个观察者(理解为绑定事件监听)

  3. 在子应用中获取数据并使用

  4. 一旦全局状态池发生变化,注册监听器的子应用都会接收到更新结果

父应用

  1. 登录之后创建状态池

  2. 主应用注册监听器onGloableGreatChange监听action里数据是否发生变化,类似于watch,一旦全局数据发生变化,马上可以获取值。回调函数第二个参数为true代立即执行,初始数据触发onGloableGreatChange

子应用

封装一个通信工具,子应用没有下载乾坤,无法直接从乾坤import工具函数使用。通过setActions方法,子应用将父组件传入action对象保存,把子应用组要调用的乾坤接口封装并export出来。

子应用挂载成功,接受父组件传过来的actions对象

  1. 注册观察者

  2. 修改全局状态

不管子应用是vue还是react,我们都是设计一个actions工具类

核心的API

  1. onGloableStateChange 监听数据变化,得到全局状态

  2. setGloabalState,修改全局状态