qiankun 应用之间数据传递

news2024/10/23 13:23:39

qiankun 应用之间数据传递

全局共享 initGlobalState

qiankun initGlobalState API 单击前往

qiankun 内部提供了 initGlobalState 方法用于注册 MicroAppStateActions 实例用于通信，该实例有三个方法，分别是onGlobalStateChange、setGlobalState、offGlobalStateChange。这几个方法其实看一下他们的英文就大概知道所对应做的事情了，下面直接通过一个案例演示一下

主应用注册

改造一下主应用的入口文件，下面是新加的和全局状态共享相关的。这里初始化了一个状态数据，并且将值给设置了，同时调用了监听改变，当值被改变后会触发对应回调。

补充这一段代码可以抽离为一个单独的文件（就像vue3当中单独写一个store一样，然后导出这个action），然后在你的主应用页面代码当中导入之后去通过setGlobalState改变值也是一样的（haha，这样就是在vue或者jsx当中用的咯，别突然被我这个写在入口当中的困住了）

import {registerMicroApps, start, initGlobalState} from 'qiankun';

// 全局状态管理
const state = {count: 1};

const action = initGlobalState(state);

action.onGlobalStateChange((value, prev) => {
  console.log('main app change', value, prev);
});

action.setGlobalState(state);

子应用获取

这里以vue3作为子应用来进行说明，同样的是对入口文件进行改造，在子应用接入qiankun的时候，我们要将对应的生命周期写上。在mount注册的时候会有一个props参数，在这个props当中就有我们所需要的全局共享对象。

let app: any;
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  createApp(App).use(router).use(ElementPlus).mount('#app');
} else {
  renderWithQiankun({
    mount(props) {
      app = createApp(App).use(router).use(ElementPlus);
      app.mount(props.container?.querySelector('#app'));
      console.log('vue app mount get props', props);
      props.onGlobalStateChange((state: any, prev: any) => console.log(`vue 子应用 [onGlobalStateChange - ${props.name}]:`, state, prev));
      props.setGlobalState({count: 100});
    },
  	// bootstrap、update、unmount三个生命周期省略。。。。
  });
}

优化

在子应用当中我们也可以把这个action单独抽离出来封装一下

function emptyAction() {
  // 警告：提示当前使用的是空 Action
  console.warn("Current execute action is empty!");
}

class Actions {

  // 默认值为空 Action
  actions = {
    onGlobalStateChange: emptyAction,
    setGlobalState: emptyAction
  };

  /**
   * 设置 actions
   */
  setActions(actions) {
    this.actions = actions;
  }

  /**
   * 映射
   */
  onGlobalStateChange(...args) {
    return this.actions.onGlobalStateChange(...args);
  }

  /**
   * 映射
   */
  setGlobalState(...args) {
    return this.actions.setGlobalState(...args);
  }
}

const actions = new Actions();
export default actions;

然后还是在入口文件的mount生命周期当中把props的action赋值给我们包的这个actions，也就是下面这样，然后再在其他地方用的时候导入这个actions就好了

import actions from './action.js';
actions.setActions(props);

在这里插入图片描述

观察者模式 & 发布订阅

js设计模式-观察者&发布订阅单击前往

可以利用观察者模式或者发布订阅将数据给绑定在windows下，然后进行对应的监听处理

Props传值

在主应用当中注册子应用的时候可以通过props来进行值传递

registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
    // 通过这个将myData传递，子应用在mount中可以拿到这个prop里面的值
    props: myData
  }
]);