微服务qiankun通信方式

qiankun：

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

qiankun的五种通信方式

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

1、localStorage/sessionStorage

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

父应用

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 时会默认调用

具体示例：

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
    }
  }
];

子应用 

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

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

5、shared 方案 

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

主应用 

// 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;

 子应用  

import shared from './shared'；

// 获取Token
shared.getToken(); 

代码007普通

打赏 收藏 海报 链接