微前端qiankun应用间通讯

qiankun官方提供的Actions通信方式,适合业务划分清晰,比较简单的微前端应用,可以满足大部分的应用场景需求。

Actions通信原理

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

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

Vue简单实例

主应用修改

main.js增加:

1
2
3
4
5
6
7
8
9
10
11
12
13
// 通讯
const actions = initGlobalState({
mt: 'init' // 初始化state,里面内容您随意
})
// 在项目中任何需要监听的地方进行监听,在这里监听是为了方便
actions.onGlobalStateChange((state,prev)=>{
console.log('main state change',state);
})
// 将action对象绑到Vue原型上,为了项目中其他地方使用方便
Vue.prototype.$actions = actions

// 以上代码放在设置默认app之前即可
setDefaultMountApp('one')

App.js增加修改state的方式:

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
42
43
44
45
46
47
48
49
<template>
<div id="main">
这是主应用文字
<br>
<button @click="changeView('/one')">子应用one</button>
&nbsp;
<button @click="changeView('/two')">子应用two</button>
<br>
<!--增加修改state的按钮-->
<button @click="changeState('1')">修改state = 1</button>
&nbsp;
<button @click="changeState('2')">修改state = 2</button>
<hr>
<div id="micro-view"></div>
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
name: 'App',
components: {
HelloWorld
},
methods: {
changeView(who){
window.history.pushState(null,who,who)
},
changeState(value){
// ------ 修改state
this.$actions.setGlobalState({
mt: value
});
}
}
}
</script>

<style>
#main {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

子应用修改

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 生命周期 - 挂载后
export async function mount(props) {
console.log('two mount');

// 设置主应用下发的方法
Object.keys(props.fn).forEach(method =>{
Vue.prototype[`$${method}`] = props.fn[method]
})

// 设置通讯
Vue.prototype.$onGlobalStateChange = props.onGlobalStateChange
Vue.prototype.$setGlobalState = props.setGlobalState

// 渲染
render()
}

About.vue增加通讯监听:

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
<template>
<div class="about">
this is two about
<br>
<button @click="testFn">测试事件</button>
<br>
{{'this is my name --- '+name}}
</div>
</template>

<script>
export default {
name: "About",
data() {
return {
name: 'init name'
}
},
mounted(){
// 增加state监听,当mt数据发生变化的时候,我们修改name,体现在页面上
this.$onGlobalStateChange((state,prev)=>{
if(state.mt !== prev.mt){
this.name = state.mt
}
})
},
methods: {
testFn(){
this.$show('测试事件成功')
}
}
}
</script>

<style scoped></style>

参考


----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡

欢迎关注我的其它发布渠道