通讯:父应用于子应用,子应用之间
需要通讯例子:在父应用登录了,在子应用需要拿到登录信息
通信方式
-
本地存储的方式获取:localStorage
-
浏览器是分域名的,在同域下才能获取本地存储数据
-
乾坤中子应用最终会打包成静态资源,放在父应用中加载,所以域名一致
-
-
采用乾坤提供全局对象(数据容器)来提供数据,每个应用都可以从这个同期中获取数据
- 乾坤官方推荐方式
全局通信开发步骤
-
在父应用中定义一个全局状态池,将数据存储到状态池
-
在子应用中注册一个观察者(理解为绑定事件监听)
-
在子应用中获取数据并使用
-
一旦全局状态池发生变化,注册监听器的子应用都会接收到更新结果
父应用
-
登录之后创建状态池
-
主应用注册监听器onGloableGreatChange监听action里数据是否发生变化,类似于watch,一旦全局数据发生变化,马上可以获取值。回调函数第二个参数为true代立即执行,初始数据触发onGloableGreatChange
子应用
封装一个通信工具,子应用没有下载乾坤,无法直接从乾坤import工具函数使用。通过setActions方法,子应用将父组件传入action对象保存,把子应用组要调用的乾坤接口封装并export出来。
子应用挂载成功,接受父组件传过来的actions对象
-
注册观察者
-
修改全局状态
不管子应用是vue还是react,我们都是设计一个actions工具类
核心的API
-
onGloableStateChange 监听数据变化,得到全局状态
-
setGloabalState,修改全局状态