位置: IT常识 - 正文

微前端:qiankun的五种通信方式(微前端Qiankun介绍)

编辑:rootadmin
微前端:qiankun的五种通信方式 背景

推荐整理分享微前端:qiankun的五种通信方式(微前端Qiankun介绍),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微前端:qiankun 主应用与子应用之间的跳转,微前端Qiankun介绍,微前端:qiankun 主应用与子应用之间的跳转,微前端Qiankun 子应用css后加载导致页面闪动,微前端:qiankun 主应用与子应用之间的跳转,微前端:qiankun 子应用跳转到主应用,微前端:qiankun 主应用与子应用之间的跳转,微前端:qiankun 主应用与子应用之间的跳转,内容如对您有帮助,希望把文章链接给更多的朋友!

今天盘点一下 qiankun 父子应用的通信方式都有哪些,我发现了 5 种。

1、localStorage/sessionStorage 2、通过路由参数共享 3、官方提供的 props 4、官方提供的 actions 5、使用vuex或redux管理状态,通过shared分享

接下来我们一个一个进行说明

1、localStorage/sessionStorage

有人说这个方案必须主应用和子应用是同一个域名下。其实不是的,子应用使用不同的域名也是可以的,因为在 qiankun 中,主应用是通过 fetch 来拉取子应用的模板,然后渲染在主应用的 dom 上的,说白了还是运行在主应用上,所以还是运行在同一个域名上,也就是主应用的域名。

父传子

主应用 main.js

localStorage.setItem('token', '123')console.log('在main中设置了token')

子应用app1 main.js

const token = localStorage.getItem('token')console.log('app1中打印token:', token)

我们可以看到,从主应用的首页跳到微应用 app1 的首页,分别打印了这两项,说明是可以通过 localstorage 通信的。

子传父

同理app1修改token,main也可以看到,这里就不再赘述

2、通过路由参数共享

这个也很好理解,因为只有一个 url,不过子应用还是主应用给 url 上拼接一些参数,那么父子应用都可以通过 route 来获取到。

父传子

这里我没有找到父传子的场景

子传父

主应用跳到子应用,子应用内部路由跳转携带参数,父应用通过路由守卫可以拿到路由上的参数。

从 main 首页跳到 app1 首页,app1 首页点击列表跳到了 app1 的详情页,可以看到详情页的 url 上分别带了两个参数,而路由跳转的时候触发了 main 的路由守卫,捕获到了这个路由。

可以看到这里的 meta 和 name 是空的,但是我子应用明明有设置啊,这是怎么回事?

其实捕获到的路由对象是主应用的,而不是子应用的,这里能获取到这两个参数,完全是因为路由守卫获取的时候只关心 url 的 ? 后面的参数,所以这里碰巧共享了。

如果父应用想完整的获取子应用的路由怎么获取呢? 只能通过其他传值方式将子应用的路由对象传给父应用了。 把父应用的路由实例传给子应用,也是没用的,大家可以不用尝试了。

3、官方提供的 props

上一篇文章 微前端:qiankun的两种运作模式 介绍了qiankun 的两种运作模式,而这两种模式都提供了一个参数 props。

父传子微前端:qiankun的五种通信方式(微前端Qiankun介绍)

我们以一个例子来示范一下,这个例子是父应用把父路由的实例传递给子应用。

父应用:

import { registerMicroApps, start,} from "qiankun";import router from '@/router'const apps = [ { name: "App1MicroApp", entry: '//localhost:9001', container: "#app1", activeRule: "/app1", props: { parentRouter: router } }];registerMicroApps(apps);start();

子应用:

let instance = nulllet router = nullfunction render (props) { router = new VueRouter({ base: window.__POWERED_BY_QIANKUN__ ? '/app1' : '', mode: 'history', routes: routes }) instance = new Vue({ router, store, // 挂载在根节点上 data(){ return { parentRouter: props.parentRouter, } }, render: (h) => h(App) }).$mount('#app')}export async function mount(props) { render(props);}// 在子应用中使用就可以访问到这个parentRouter了this.$root.parentRouter子传父

同理,传进来一个函数或者对象等,子应用操作这个对象就是改变的父应用的状态。 类似 react 的通信方式。

4、官方提供的 actions

就一个 API initGlobalState(state) 参数:传入你维护的一个 state,类似 store 中的 state 返回:action 实例,并挂载了三个函数 1、onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void, 在当前应用监听全局状态,有变更触发 callback,fireImmediately = true 立即触发 callback

2、setGlobalState: (state: Record<string, any>) => boolean, 可以在应用中任何地方调用来修改全局状态,子应用想使用的话可以通过 props 把 action 传给子应用使用

3、offGlobalStateChange: () => boolean,移除当前应用的状态监听,微应用 umount 时会默认调用

父传子

主应用: src/micro/actions.ts

import { initGlobalState, MicroAppStateActions } from 'qiankun';const state = { num: 1};// 初始化 stateconst actions: MicroAppStateActions = initGlobalState(state);actions.onGlobalStateChange((state, prev) => { // state: 变更后的状态; prev 变更前的状态 console.log('主应用检测到state变更:', state, prev);});// 你还可以定义一个获取state的方法下发到子应用actions.getGlobalState = function () { return state}export default actions;

当然,父应用也可以自己通过这个 actions 来调用 setGlobalState 函数改变全局状态 state

src/micro/index.js

import { registerMicroApps, start,} from "qiankun";import actions from './actions'const apps = [ { name: "App1MicroApp", entry: '//localhost:9001', container: "#app1", activeRule: "/app1", props: { parentActions: actions } }];registerMicroApps(apps);start();

这样就把这个 actions 传给了子应用。

子应用:

let instance = nulllet router = nullfunction render (props) { router = new VueRouter({ base: window.__POWERED_BY_QIANKUN__ ? '/app1' : '', mode: 'history', routes: routes }) instance = new Vue({ router, store, // 挂载在根节点上 data(){ return { parentActions: props.parentActions, } }, render: (h) => h(App) }).$mount('#app')}export async function mount(props) { render(props);}// 在子应用中使用就可以访问到这个parentActions了this.$root.parentActions.setGlobalState({ num: 2 })// 调用挂载在 actions 上的自定义方法,获取当前的全局 statethis.$root.parentActions.getGlobalState()

我在子应用的 mounted 中把全局 state 的 num 设置了 2,就是如下效果。

子传父

上面例子其实已经都包括了。再总结一下就是:

父传子就是父应用通过 props 把 parentActions 传给子应用,子传父就是子应用接受到 parentActions 可以来改变父应用的状态。

5、shared 方案

这个方案我大概描述一下,就不写代码细讲了,因为和上面的方案很像。

就是父应用通过 vuex 或者 redux 正常使用维护一个 state,然后创建一个 shared 实例,这个实例提供对 state 的增删改查,然后通过 props 把这个 shared 实例传给子应用,子应用使用就行。

主应用: 这个 shared 实例大概就长这样:

// micro-app-main/src/shared/index.tsimport store from "./store";class Shared { /** * 获取 Token */ public getToken(): string { const state = store.getState(); return state.token || ""; } /** * 设置 Token */ public setToken(token: string): void { // 将 token 的值记录在 store 中 store.dispatch({ type: "SET_TOKEN", payload: token }); }}const shared = new Shared();export default shared;

同样的传入方式 src/micro/index.js

import { registerMicroApps, start,} from "qiankun";import shared from './shared'const apps = [ { name: "App1MicroApp", entry: '//localhost:9001', container: "#app1", activeRule: "/app1", props: { parentShared: shared } }];registerMicroApps(apps);start();

想要了解具体可以看这篇文章: https://cloud.tencent.com/developer/article/1770605

总结类似设置全局共享 token 就适合方案1每个页面要设置不同的title,可以用方案2在 url 上带上一个 title,这样父子应用都能监听到方案3则适合一些复杂一点的数据交互一般到方案3,就可以了,如果需要方案4了,就说明应用交流太频繁了,考虑是不是你们的应用拆分的有问题
本文链接地址:https://www.jiuchutong.com/zhishi/289642.html 转载请保留说明!

上一篇:YOLOv5部署到web端(flask+js简单易懂)(yolo部署到服务器)

下一篇:vue.config.js配置proxy代理解决跨越;proxy代理报404;(vueconfigjs配置proxy 无效)

  • 荣耀30pro双卡的安装办法(荣耀30pro双卡都支持5g吗)

    荣耀30pro双卡的安装办法(荣耀30pro双卡都支持5g吗)

  • iphone实况照片怎么变成静态照片(iphone实况照片怎么保存到电脑)

    iphone实况照片怎么变成静态照片(iphone实况照片怎么保存到电脑)

  • 苹果手机应用宝怎么下载(苹果手机应用宝怎么下载不了)

    苹果手机应用宝怎么下载(苹果手机应用宝怎么下载不了)

  • 金立记事本找不到了(金立手机记事本不见了怎么恢复)

    金立记事本找不到了(金立手机记事本不见了怎么恢复)

  • 消息被对方拒收是拉黑还是删除了(消息被对方拒收了怎样才能联系对方)

    消息被对方拒收是拉黑还是删除了(消息被对方拒收了怎样才能联系对方)

  • 申请天猫旗舰店的条件(申请天猫旗舰店的商标必须要35类的吗?)

    申请天猫旗舰店的条件(申请天猫旗舰店的商标必须要35类的吗?)

  • 腾讯会议怎么没有共享(腾讯会议怎么没有聊天界面)

    腾讯会议怎么没有共享(腾讯会议怎么没有聊天界面)

  • 多线盘和总线盘的区别(消防控制柜多线盘和总线盘)

    多线盘和总线盘的区别(消防控制柜多线盘和总线盘)

  • 剪映瘦脸功能在哪(剪映瘦脸功能在哪里找)

    剪映瘦脸功能在哪(剪映瘦脸功能在哪里找)

  • qq关联怎么看不到对方的聊天记录(qq关联怎么看不到对方的消息提醒)

    qq关联怎么看不到对方的聊天记录(qq关联怎么看不到对方的消息提醒)

  • 笔记本上有摄像头吗(笔记本上有摄像头但就是打不开)

    笔记本上有摄像头吗(笔记本上有摄像头但就是打不开)

  • 手机一直不关机对手机有影响吗(手机一直不关机会不会有影响)

    手机一直不关机对手机有影响吗(手机一直不关机会不会有影响)

  • 苹果手机看视频卡顿是什么原因(苹果手机看视频没有声音怎么回事)

    苹果手机看视频卡顿是什么原因(苹果手机看视频没有声音怎么回事)

  • vivox30左边的按键是什么(vivox30左边的按键怎么设置)

    vivox30左边的按键是什么(vivox30左边的按键怎么设置)

  • 为什么iphonexs照片偏红(苹果xs拍照为啥显脸大)

    为什么iphonexs照片偏红(苹果xs拍照为啥显脸大)

  • 苹果打电话为什么没4g(苹果打电话为什么会黑屏)

    苹果打电话为什么没4g(苹果打电话为什么会黑屏)

  • iphonexr蓝牙一直转(苹果xr蓝牙一直转圈圈)

    iphonexr蓝牙一直转(苹果xr蓝牙一直转圈圈)

  • ios清理缓存(ios清理缓存插件)

    ios清理缓存(ios清理缓存插件)

  • tpc数据线不分正反吗(type-c数据线正负极)

    tpc数据线不分正反吗(type-c数据线正负极)

  • 怎么看qq创建多少天(怎么看qq创建多少个群聊)

    怎么看qq创建多少天(怎么看qq创建多少个群聊)

  • 秀米怎么上传视频(秀米怎么上传视频手机版)

    秀米怎么上传视频(秀米怎么上传视频手机版)

  • 显卡供电不足的症状(显卡供电不足的表现 显示器无信号)

    显卡供电不足的症状(显卡供电不足的表现 显示器无信号)

  • 微信加入黑明单聊天记录还在吗(微信加入黑明单后以前的信息还能看到吗)

    微信加入黑明单聊天记录还在吗(微信加入黑明单后以前的信息还能看到吗)

  • 天猫劵怎么领(天猫劵怎么领取使用)

    天猫劵怎么领(天猫劵怎么领取使用)

  • 小红书如何取消自动续费(小红书如何取消关注我的人)

    小红书如何取消自动续费(小红书如何取消关注我的人)

  • 房产税计入哪个科目 新会计准则
  • 职工薪酬纳税调减的情况
  • 购买方收取的违约金怎么入账
  • 建筑类企业是否允许留抵
  • 利润表年度报表
  • 房租押金没退款怎么起诉
  • 支付一年房租的会计科目
  • 驾驶员行车补贴开什么发票
  • 建筑企业施工管理人员
  • 一般纳税人印花税税率是多少
  • 应税消费品的税目有哪些
  • 哪些企业税收优惠
  • 应交消费税通过什么科目核算
  • 从小规模取得3%农产品进项税额抵扣
  • 超市商品打折怎么算出来
  • 外汇银行会计特殊处理方法如何理解?
  • 银行缴纳印花税的范围
  • 金税盘维护费抵税会计分录
  • 一般纳税人运费计入什么科目
  • 消费税有哪几种纳税方式
  • 活动策划费属于哪一类
  • 未分配利润调整到其他应付款
  • 把股份转给别人怎么处理
  • 管理费用劳务费包括什么
  • 审计调整以前年度投资收益怎么处理
  • 小规模减免的税额怎么做账
  • 现代服务业包括哪些
  • 生产型出口企业免抵退
  • 破产清算中欠发工资应否交个人所得税
  • thinkphp自定义标签
  • gridview datakeynames
  • 企业其他应付款太多怎么办
  • 小满秒懂百科
  • php内存缓存功能怎么用
  • 营业外支出贷方在利润表怎么体现
  • 车船税为什么没有发票
  • 企业缴纳水利建设基金的依据是什么
  • 自产货物进项税抵扣
  • mysql一次io
  • 工会经费为0是不用申报的?
  • 材料报废属于正常损失吗
  • 债券投资属于什么
  • 地下车库的成本包括哪些
  • 承兑汇票多付退税怎么算
  • 收款预缴增值税怎么做账
  • 车船使用税和印花税谁交
  • 网上购物没有发票
  • 增值税专用发票怎么开
  • 计提个人经营所得税怎么算
  • 溢价发行股票的交易费用
  • 其他应收款待抵扣税金
  • 离岸银行账户开户
  • 高新技术企业每年需要多少专利
  • freebsd软件包
  • 获取linux系统版本
  • winproxy.exe - winproxy是什么进程
  • linux网卡bound
  • Win10 Mobile 10586升级后无限重启怎么办 硬重启帮您解决
  • win7适用ie几
  • win8.1开机自启项目在哪里
  • WIN10系统打开IE浏览器断网
  • Debian如何安装网卡驱动
  • js中date对象
  • 推荐10 个很棒的电影
  • javascript内置对象应用团购
  • 安卓关键词覆盖
  • php使用js
  • ug合并命令在哪
  • 下载随手笔记
  • unity mesh bounds
  • javascript none
  • 多线程python爬虫
  • javascript的常用例子
  • bootstrap要学多久
  • 手机银行如何查询明细
  • 四川志愿服务注册入口
  • 出口退税企业的账务处理
  • 污水处理厂房产税优惠政策
  • 太平税务局电话
  • 苏宁易购股份转增股本
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设