使用initGlobalState(state)全局传值
-
参数
- state -
Record<string, any>
- 必选
- state -
-
用法
定义全局状态,并返回通信方法,建议在主应用使用,微应用通过 props 获取通信方法。
-
返回
-
MicroAppStateActions
-
onGlobalStateChange:==监听数据变化==
(callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void
, 在当前应用监听全局状态,有变更触发 callback,fireImmediately = true 立即触发 callback -
setGlobalState:==改变数据==
(state: Record<string, any>) => boolean
, 按一级属性设置全局状态,微应用中只能修改已存在的一级属性 -
offGlobalStateChange: ==移除监听==
() => boolean
,移除当前应用的状态监听,微应用 umount 时会默认调用
-
-
-
示例
主应用:
import { initGlobalState, MicroAppStateActions } from 'qiankun';
// 初始化 state
const actions: MicroAppStateActions = initGlobalState(state);
actions.onGlobalStateChange((state, prev) => {
// state: 变更后的状态; prev 变更前的状态
console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange();
微应用:
// 从生命周期 mount 中获取通信方法,使用方式和 master 一致
export function mount(props) {
props.onGlobalStateChange((state, prev) => {
// state: 变更后的状态; prev 变更前的状态
console.log(state, prev);
});
props.setGlobalState(state);
}
优点:可传递store到各子应用
缺点:子应用在app.ts中才比较好使用props.onChangeGlobalState之类语法
路由绑定式消费微应用
主应用:需要在 src/app.ts
里导出一个 useQiankunStateForSlave
函数,函数的返回值将作为 props 传递给微应用,如:
// src/app.ts
export function useQiankunStateForSlave() {
const [globalState, setGlobalState] = useState({ str: 'aaa' })
const [ablState, setAblState] = useState({ hh: 'kkk' })
// 实际给子应用调用修改state的方法
// 传参和实现可以自定义,子应用直接调用setGlobalState是不生效的,所以才需要这个额外的方法,这是一个坑
const setState = (str: any) => { setGlobalState({ str}) }
const setablState = (hh: any) => { setAblState({hh}) }
return { globalState, setGlobalState, setState ,ablState,setAblState,setablState};
}
- 实际给子应用调用修改state的方法 ,传参和实现可以自定义,子应用直接调用setGlobalState是不生效的,所以才需要这个额外的方法,这是一个坑
子应用:微应用中会自动生成一个全局 model,可以在任意组件中获取主应用透传的 props 的值。
import { useModel } from 'umi';
function MyPage() {
const masterProps = useModel('@@qiankunStateFromMaster');
return <div>{ JSON.strigify(masterProps) }</div>;
}
子应用中的改变和监听
const alist=masterProps.globalState.str.list
console.log(alist)
masterProps.onGlobalStateChange((state: any, prev: any) => {
state: 变更后的状态; prev 变更前的状态
console.log(state, prev);
});
useEffect(() => { masterProps.setState('bbb') }, [])
console.log('masterProps',masterProps)
基于 props 传递
类似 react 中组件间通信的方案
主应用中配置 apps 时以 props 将数据传递下去(参考主应用运行时配置一节)
// src/app.js
export const qiankun = fetch('/config').then(config => {
return {
apps: [
{
name: 'app1',
entry: '//localhost:2222',
props: {
onClick: event => console.log(event),
name: 'xx',
age: 1,
},
},
],
};
});
子应用在生命周期钩子中获取 props 消费数据(参考子应用运行时配置一节)