globalState主要用于数据共享,把方法、或者变量写进主系统的globalState里。
1.主系统调用子系统方法
主系统应用中定义和注册全局状态和方法
import { initGlobalState } from 'qiankun';
export function qiunkun() {
// 定义一个全局方法
let ways: any;
// 初始化state-->ways为方法
const actions: any = initGlobalState({ ways });
// 设置新的值
actions.setGlobalState({ ways });
// 监听全局状态的变化
actions.onGlobalStateChange((newState, _prev) => {
// if (typeof newState.ways === 'function') {
// 方法判断一下再存到store中
// }
});
}
子系统set要传递的方法
初始化的时候在main.ts中set一下
mount(props) {
instance.provide('$setGlobalState', props.setGlobalState);
},
在相应页面把要传递的方法set进去以供主系统监听使用
const setGlobalState: any = inject('$setGlobalState');
setGlobalState({ ways: saveAtlas });
2.子系统使用主系统的变量
主系统应用中定义和注册全局状态和方法
import { initGlobalState } from 'qiankun';
export function qiunkun() {
// 定义一个全局状态
let info: any;
// 初始化state-->info为变量
const actions: any = initGlobalState({ info});
}
子系统main.ts加载的时候获取数据
const qiankunStoreChange = async (props) => {
if (props?.onGlobalStateChange) {
await props?.onGlobalStateChange(async (value) => {
// 将值存放在子系统中,以便其他页面使用
}, true);
}
};