微服务qiankun通信方式

qiankun:

是一种类似于微服务的架构,是将一个大型应用拆分成若干个更小、更简单,可以独立开发、测试和部署的子应用,然后由一个基座应用根据路由进行应用切换,主要是为了解决大型工程在变更、维护、扩展等方面的困难而提出的!

qiankun的五种通信方式

1、localStorage/sessionStorage

2、通过路由参数共享

3、官方提供的 props

4、官方提供的 actions

5、使用vuex或redux管理状态通过shared分享

1、localStorage/sessionStorage

不用区分域名,在 qiankun 中应用使用不同的域名也是可以获取得到,主要运行在主应用上所以还是运行在同一个域名上也就是主应用的域名。

父应用

objectivec 复制代码
localStorage.setItem('token', '我是保存在本地的数据')

子应用 获取数据

复制代码
const token = localStorage.getItem('token')

2、通过路由参数共享

url 上拼接一些参数,父子应用都可以通过 route 来获取到

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {

// 路由参数获取

})

3、官方提供的 props

父应用把父路由的实例传递给子应用 props 接收

4、官方提供的 actions

返回action 实例并挂载了三个函数

1、onGlobalStateChange:在当前应用监听全局状态有变更触发

2、setGlobalState: 可以在应用中任何地方调用来修改全局状态

3、offGlobalStateChange:移除当前应用的状态监听微应用 umount 时会默认调用

具体示例:

objectivec 复制代码
actions.ts文件

import { initGlobalState, MicroAppStateActions } from 'qiankun';

const state = {
  cont:''
};

// 初始化 state
const actions: MicroAppStateActions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
});

// 定义一个获取state的方法下发到子应用
actions.getGlobalState = function () {
  return state
}

export default actions;

父应用

复制代码
import actions from './actions'
const apps = [
  {
    props: {
      parentActions: actions
    }
  }
];

子应用

objectivec 复制代码
// 在子应用中使用就可以访问到这个parentActions了
this.$root.parentActions.setGlobalState({ cont: '我是父应用传下来的数据' })

// 调用挂载在 actions 上的自定义方法获取当前的全局 state
this.$root.parentActions.getGlobalState()

5、shared 方案

父应用通过 vuex 或者 redux 维护一个 state然后创建一个 shared ,和 actions 类似

objectivec 复制代码
主应用 

// shared.ts

import store from "./store";

class Shared {
  /**
   * 获取 Token
   */
  public getToken(){
    return store.getState() || "";
  }

  /**
   * 设置 Token
   */
  public setToken(token){
    store.dispatch({
      type: "SET_TOKEN",
      payload: token
    });
  }
}

const shared = new Shared();

export default shared;

子应用

objectivec 复制代码
import shared from './shared';

// 获取Token
shared.getToken(); 
相关推荐
DemonAvenger31 分钟前
大规模Go网络应用的部署与监控
网络协议·架构·go
夜里慢慢行4561 小时前
Docker Buildx最佳实践:多架构镜像构建指南
docker·eureka·架构
__Smile°4 小时前
基于 kubeadm 搭建 k8s 集群
linux·运维·docker·云原生·容器·kubernetes
用户84913717547164 小时前
JustAuth实战系列(第3期):接口设计艺术 - AuthRequest核心接口拆解
java·后端·架构
qb4 小时前
vue3.5.18源码:组件树的递归渲染
前端·vue.js·架构
@不会写代码的小张4 小时前
k8s核心组件——kubelet详解
云原生·容器·kubernetes
DemonAvenger5 小时前
网络性能优化:Go编程视角
网络协议·架构·go
Code季风5 小时前
分布式系统中的幂等性设计:从理论到实现的全面指南
redis·分布式·微服务
君科程序定做5 小时前
容器 vs 虚拟机
微服务·云原生·容器·服务发现
右手嘚温暖12 小时前
分布式事务Seata、LCN的原理深度剖析
spring boot·分布式·后端·spring·spring cloud·中间件·架构