data communication
In the micro front-end architecture, we should divide the corresponding sub-applications according to the business, rather than dividing the sub-applications by functional modules. There are two reasons for this:
In the micro-frontend architecture, the sub-application is not a module, but an independent application. We divide the sub-applications by business to have better maintainability and decoupling.
Sub-applications should have the ability to run independently. Frequent communication between applications will increase the complexity and coupling of the application.
To sum up, we should divide each sub-application from the business point of view, reduce the communication between applications as much as possible, so as to simplify the whole application, and make our micro-frontend architecture more flexible and controllable.
qiankun props pass value
In the method registerMicroApps that registers application information, data is passed to the sub-application through props. The advantage of this method is that it is very simple to use and can pass components and methods. The disadvantage is that it can only be passed from the main application to the sub-application. There are many scenarios where this is not applicable.
props - object - optional, the data that the main application needs to pass to the micro application.
Generally, it can be passed to the sub-application through the store of the main application.
Data obtained by subcomponent
initGlobalState
qiankun implements global state management of the main application through initGlobalState, onGlobalStateChange, and setGlobalState.
onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void, monitor the global state in the current application, trigger callback if there is a change, fireImmediately = true trigger callback immediately
setGlobalState: (state: Record<string, any>) => boolean, sets the global state according to the first-level attributes. Only existing first-level attributes can be modified in the micro-application
offGlobalStateChange: () => boolean, removes the status monitoring of the current application. It will be called by default when the micro application is umounted.
The main application passes values to the sub-application
Main application main.js
import {
initGlobalState,
} from 'qiankun';
export const initialState = {
globalLocation: {
id: 1234,
station: '北京'
}
}
const actions = initGlobalState(initialState) //初始化全局数据
actions.onGlobalStateChange((newState, prev) => {
//监听全局状态
console.log(newState, prev)
for (let key in newState) {
initialState[key] = newState[key]
}
});
Sub-application action, js
// /src/qiankun/action.js
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() {
return this.actions.onGlobalStateChange(...arguments);
}
/**
* 映射
*/
setGlobalState() {
return this.actions.setGlobalState(...arguments);
}
}
const actions = new Actions();
export default actions;
Sub-application main.js
/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
export async function mount(props) {
console.log('[vue] props from main framework', props);
props.onGlobalStateChange((state, prev) => {
// state: 变更后的状态; prev 变更前的状态
console.log('这是主应用传来的值',state, prev);
},true);//第二个参数为 true，表示立即执行一次观察者函数
actions.setActions(props) //子项目的入口文件中设置子应用的全局state
render(props)
}
Subapplication passes values to main application
import action from "../action";
export default {
name: "HelloWorld",
props: {
msg: String,
},
created(){
console.log('VVVVVVVVVVVVVVVVV');
},
mounted() {
// 接收state
action.onGlobalStateChange((state) => {
console.log(state);
}, true);
},
methods: {
changeValue() {
// 修改state
action.setGlobalState({
count: 789});//每次执行时都会出发一次mounted
},
},
};