qiankun微前端主子应用通信方案

2024-08-27 08:58

本文主要是介绍qiankun微前端主子应用通信方案,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、概念

目前有关微前端通信的方案无非两种:

使用qiankun提供的api-initGlobalState进行通信;
通过在主、微应用中定义状态管理类的方式进行通信;

下面我们就第一种方案进行详细讲解,毕竟官方提供了实现方案。达到的效果如下:

主应用作为中转,进行状态承接与派发;
各个微应用不仅能获取主应用的状态变更,还能同步自身状态到主应用;
微应用能独立运行;

二、主应用

我们先来看看initGlobalState(state) 这个api的具体信息:

1.用法:在主应用中使用,定义全局状态,微应用通过props传参获取;
2.返回:
onGlobalStateChange(callback, Immediately)在当前应用监听全局状态变化;
setGlobalState(state)按照一级属性进行状态设置,微应用只能修改一级属性;
offGlobalStateChange()移除当前的状态监听,微应用在unmount时默认调
用;
下面我们在主应用中进行初始化:

import { registerMicroApps, start, setDefaultMountApp, initGlobalState } from 'qiankun'const { onGlobalStateChange } = initGlobalState({iptValue: ''})
onGlobalStateChange((state, prev) => {// state: 变更后的状态; prev 变更前的状态console.log('main-app onGlobalStateChange', state, prev)
})

这里我们只简单定义了一个一级属性iptValue,用于在微应用中绑定表单。同时监听状态变化,打印相关信息。

三、微应用

主应用中状态初始化成功后,整个state状态由qiankun框架内部进行维护,开发者通过官方提供的api进行state的修改、追踪。

因此在每一个微应用中,我们需要做的事情有两个,即:

1.同步主应用状态变化到微应用;
2.同步微应用状态变化到主应用;

下面分别讲解在vue、react中如何进行状态的双向同步。

3.1 vue微应用
我们需要在之前vue入口文件main.js中进行扩展,修改render(props)函数。微应用内部状态管理我们使用vuex,通过vuex提供的api进行状态双向同步。

第一步新建store/index.js文件:

const state = {store: {}
}const getters = {iptValue: state => state.store.iptValue
}const mutations = {initStore(state, data) {state.store = data},setStore(state, data) {state.store = {...state.store,...data}}
}const actions = {}export default {actions,getters,state,mutations,modules: {},strict: false,plugins: [],
}

这里我们只是定义了store的结构,但是并没有生成vuex的实例对象。

第二步初始化微应用store,绑定状态同步逻辑:

import Store from './store/index'/*** 初始化主微应用通信逻辑* 1.主应用状态变更同步到微应用;* 2.微应用状态变更同步到主应用;*/
function initStore(props) {const myPlugin = store => {let prevState = _.cloneDeep(store.state)// 当 store 初始化后调用store.subscribe((mutation, state) => {// 每次 mutation 之后调用let nextState = _.cloneDeep(state)if(JSON.stringify(nextState) !== JSON.stringify(prevState)) {prevState = nextState// 微应用中store变更后,将状态更新到主应用props.setGlobalState &&props.setGlobalState({...state.store})}})}const storeInstance =  new Vuex.Store({...Store,plugins: [myPlugin]})// 主应用状态变化后,同步到微应用props.onGlobalStateChange &&props.onGlobalStateChange((state, prev) => {storeInstance.commit('initStore', state)console.log('vue-app onGlobalStateChange', state, prev)}, true)return storeInstance
}

主应用状态变更同步到微应用比较简单,在onGlobalStateChange方法中调用commit进行同步即可。

微应用状态变更同步到主应用我们使用setGlobalState()方法,关键是要实时监听微应用状态变更。这里我们使用vuex插件提供的派发功能subscribe,同步之前会比较两次状态是否存在变更,否则会陷入死循环。

第三步为vue实例绑定store:

function render(props = {}) {...store = initStore(props)instance = new Vue({router,store,render: h => h(App),}).$mount(container ? container.querySelector('#app') : '#app')
}

这样vue微应用状态同步逻辑就完成了,就像平时使用vuex一样进行管理即可。当然主、微应用通信的这一份状态最好是单独进行维护的,不应该和微应用内部业务逻辑状态相关联,我们可以使用vuex的modules功能进行实现,这里就不再赘诉有需要再更新。

3.2 react微应用
react的实现逻辑和vue都一样,只是不同技术栈代码写法不一样而已,react中我们使用mobx、mobx-react进行状态管理。mobx开箱即用支持装饰器语法,天然存在状态隔离,和react-hook完美搭配。

第一部新建store文件:

import { observable, computed, action, reaction } from 'mobx'
import _ from 'lodash'
import { MainStoreModel } from '../model/mainApp'class MainApp {static setGlobalState: Function@observable preStore: MainStoreModel = {}@observable store: MainStoreModel = {}constructor() {}@computed get iptValue() {return this.store.iptValue}@actioninitStore(data: MainStoreModel) {this.store = data}@actionsetStore(data: any) {const prev = _.cloneDeep(this.store)this.store = {...prev,...data}}
}const mainApp = new MainApp()export { mainApp, MainApp 
}

第二步修改入口文件,初始化state同步逻辑

import { mainApp, MainApp } from './store/mainApp'/*** 初始化主微应用通信逻辑* 1.主应用状态变更同步到微应用;* 2.微应用状态变更同步到主应用;*/
function initStore(props: any) {// 将setGlobalState方法绑定到类MainApp静态属性上MainApp.setGlobalState = props.setGlobalState ? props.setGlobalState : null// 主应用状态变更同步到微应用props.onGlobalStateChange &&props.onGlobalStateChange((state: MainStoreModel, prev: MainStoreModel) => {mainApp.initStore(state)console.log('react-app onGlobalStateChange', state, prev)}, true)
}export async function mount(props: any) {render(props)
+  initStore(props)
}

主应用状态同步到微应用逻辑和vue大同小异。不同的是,我们将setGlobalState方法绑定在MainApp类的静态属性上,微应用状态同步到主应用时会用到。

第三步reaction同步微应用状态到主应用

我们使用mobx中reaction的特性用于监听store的变化,来实现我们需要的逻辑。

class MainApp {  ...appReaction = reaction(() => this.store,store => {const nextState = _.cloneDeep(store)const prevState = _.cloneDeep(this.preStore)if(JSON.stringify(nextState) !== JSON.stringify(prevState)) {MainApp.setGlobalState&&MainApp.setGlobalState(nextState)this.preStore = nextState}})
}

同步逻辑同样需要比较变更前后两份深拷贝状态的差异,防止陷入死循环。

这篇关于qiankun微前端主子应用通信方案的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1111214

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Java进行文件格式校验的方案详解

《Java进行文件格式校验的方案详解》这篇文章主要为大家详细介绍了Java中进行文件格式校验的相关方案,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、背景异常现象原因排查用户的无心之过二、解决方案Magandroidic Number判断主流检测库对比Tika的使用区分zip

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

IDEA中Git版本回退的两种实现方案

《IDEA中Git版本回退的两种实现方案》作为开发者,代码版本回退是日常高频操作,IntelliJIDEA集成了强大的Git工具链,但面对reset和revert两种核心回退方案,许多开发者仍存在选择... 目录一、版本回退前置知识二、Reset方案:整体改写历史1、IDEA图形化操作(推荐)1.1、查看提