qiankun使用Actions实现通信

接上一篇文章补充官方提供的Actions方式实现通信

参考文档

• umi qiankun插件
• qiankun官方文档

umi文档暴露的相关配置不多，更多自定义的配置去qiankun官网的文档查看

一、使用actions通信

qiankun 内部提供了 initGlobalState方法用于注册 MicroAppStateActions 实例用于通信，该实例有三个方法，分别是：

• setGlobalState：设置 globalState - 设置新的值时，内部将执行 浅检查，如果检查到 globalState 发生改变则触发通知，通知到所有的 观察者 函数。
• onGlobalStateChange：注册 观察者 函数 - 响应 globalState 变化，在 globalState 发生改变时触发该 观察者 函数。

详细文档
使用：定义全局状态，并返回通信方法，建议在主应用使用，微应用通过 props 获取通信方法。

• 主应用

// 主应用
import { initGlobalState } from 'qiankun';

let state = {};
const actions = initGlobalState(state);

// 封装自带的setGlobalState方法
actions.setState = (obj) => {
  actions.setGlobalState(defaultState);
};

// 自定义getState方法
actions.getState = (key) => {
  return key ? state[key] : state;
};

export { actions };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 微应用

// 微应用
import { actions } from './actions';

export const qiankun = {
  async bootstrap(props) {
    // 应用加载之前;
  },
  async mount(props) {
    // 应用 render 之前触发
    // 微应用这里可以获取主应用的全局状态通信方法
    props.onGlobalStateChange((state, prev) => {
      actions.setState(state);
    }, true);
  },
  async unmount(props) {
    // 应用卸载之后触发
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• 微应用-actions.js

// 微应用-actions.js
// 全局状态，并返回通信方法
import { initGlobalState } from 'qiankun';
let state = {};
const actions = initGlobalState(state);
actions.setState = (info) => {
  state = Object.assign(JSON.parse(JSON.stringify(state)), info);
  actions.setGlobalState(info);
};

actions.getState = (key) => {
  return key ? state[key] : state;
};
export { actions };
1
2
3
4
5
6
7
8
9
10
11
12
13
14

二、注册子应用时的属性配置

详细属性用法及描述参照qiankun-API说明和常见问题

// 主应用app.js
import { history } from 'umi';

const getSubApps = ({ location }) => [
  {
    name: 'app1', // 唯一 id
    entry: '',  // 入口地址
    activeRule: location.pathname, // 微应用的激活规则
    sandbox: { strictStyleIsolation: true }, // 沙箱隔离设置
    prefetch: true, // 是否开启预加载
    singular: false, // 是否为单例场景
  },
  {
    name: 'app2',
    entry: '',
    activeRule: location.pathname,
    sandbox: { strictStyleIsolation: true },
    prefetch: true,
    singular: false,
  },
]


export const qiankun = fetch('/config').then(({ apps }) => ({
  // 注册子应用信息

  apps: getSubApps(history),
  start: {
    prefetch: ['app1', 'app2'], // 预加载的微应用模块
    sandbox: { strictStyleIsolation: true }, // 沙箱隔离， 这种写法qiankun 会为每个微应用的容器包裹上一个 shadow dom （https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM）节点，从而确保微应用的样式不会对全局造成影响。
    singular: true, // 是否为单例场景
  },
  // 完整生命周期钩子请看 https://qiankun.umijs.org/zh/api/#registermicroapps-apps-lifecycles
  lifeCycles: { // 全局的微应用生命钩子
    afterMount: (props) => {
      // 卸载之后
      console.log(2222)
    },
  },
  // 支持更多的其他配置，详细看这里 https://qiankun.umijs.org/zh/api/#start-opts
}));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

三、主应用嵌入子应用时菜单设置

qiankun内部在window上挂载了window.__POWERED_BY_QIANKUN__字段，类型时布尔值，表示此时的应用是否从乾坤打开

// 子应用 antdPro
// app.js
// layout设置设置pure属性
// pure 是否删除所有自带页面。 详情查看ProLayout组建属性
pure: window.__POWERED_BY_QIANKUN__ ? true : false,

1
2
3
4
5
6