通讯方式主要运用的qiankun提供的通讯api initGlobalState 以及vuex动态添加模块的方法
registerModule
1、在qiankun文件夹下创建share.js
/*
* @Author: Hzh
* @Date: 2021-05-07 16:02:48
* @LastEditTime: 2021-07-22 14:52:57
* @LastEditors: Hzh
* @Description:
*/
import Vue from 'vue'
import store from '../store'
import {
initGlobalState } from 'qiankun'
const initialState = Vue.observable({
userInfo: {
}, // 当前登录用户信息
globalConfig: {
},
sources: [], // 所有资源
btnCodeList: [] // 按钮权限
})
// 初始化state
export const actions = initGlobalState(initialState)
actions.onGlobalStateChange((newValue) => {
// console.log('newValue', newValue)
// 修改全局下发的数据
for (const key in newValue) {
initialState[key] = newValue[key]
// if (key === 'userInfo') {
// store.commit('UPDATE_USER_INFO', newValue[key])
// continue
// }
// if (key === 'globalConfig') {
// store.commit('UPDATE_GLOBAL_CONFIG', newValue[key])
// continue
// }
if (key === 'sources') {
store.commit('qiankun/UPDATE_GLOBAL_SOURCE', newValue[key])
continue
}
}
})
// 按一级属性设置全局状态,微应用中只能修改已存在的一级属性
// actions.setGlobalState(state);
// 自定义一个资源去重的方法
actions.distinctSource = (sources, addData) => {
const newData = []
for (let i = 0; i < addData.length; i++) {
let flag = true
for (let j = 0; j < sources.length; j++) {
if (sources[j].code === addData[i].code) {
flag = false
break
}
}
if (flag) {
newData.push(addData[i])
}
}
sources = sources.concat(newData)
return sources
}
// 自定义一个获取state的方法下发到子应用
actions.getGlobalState = (key) => {
// 有key,表示取globalState下的某个子级对象
// 无key,表示取全部
return key ? initialState[key] : initialState
}
// 将action对象绑到Vue原型上,为了项目中其他地方使用方便
Vue.prototype.$actions = actions
// 传入子应用的公共数据
export const share = {
getGlobalState: actions.getGlobalState,