基于微前端qiankun的父子应用通信实战（下篇）

作者：管理员 2022-08-30 13:50:42 分类：别出心裁-妙阅读（3092） 0

上篇手把手教你基于微前端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

::CODECOLOR

剩余50%内容付费后可查看

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(30) 打赏

标签：

上一篇：手把手教你基于微前端qiankun的应用实践（上篇）

下一篇：基于微前端qiankun的父子应用通信实战（番外篇）

基于微前端qiankun的父子应用通信实战（下篇）

应用划分

Actions通信

主应用配置

创建actions实例文件

setGlobalState设置字段testData

相关推荐

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

点击取消