微前端中子应用和主应用之间的数据怎么传输？
之前想到的解决办法是将数据存到localStorage中，这样可以解决传输的问题，每个子应用如果想要数据直接缓存中取就可以了。但是这样又产生了一个新的问题，子应用组件中不能实时拿到缓存中最新的数据，而是上一次的缓存，这不是我们想要的效果。
qiankun框架很好地帮我们解决了这个问题，下面详细介绍怎么使用initialState来打造全局(主应用和微应用)state吧！
第一步：首先我们在主应用中src目录下创建一个action.js
//主应用的src/action.js
import { initGlobalState } from 'qiankun'
export const initialState = {
globalLocation: {
SUID: 60919,
station: '东湖校区'
}
}
const actions = initGlobalState(initialState)
// 定义一个获取state的方法下发到子应用
actions.getGlobalState = (key) => {
// 有key，表示取globalState下的某个子级对象
// 无key，表示取全部
return key ? initialState[key] : initialState
}
actions.onGlobalStateChange((newState, prev) => {
// state: 变更后的状态; prev 变更前的状态
// console.log('main change', JSON.stringify(newState), JSON.stringify(prev));
for (let key in newState) {
initialState[key] = newState[key]
}
});
export default actions
第二步：在主应用的某个组件中用setGlobalState更改state值
//这里引入刚才创建的action.js
import action, { initialState } from '@/action'
const Location = () => {
const dispatch = useDispatch()
const [selectedCity, setSelectedCity] = useState(
initialState.globalLocation.station
)
const stationsMenu = (
<Menu>
{map((item) => (
<Menu.Item
key={item._id}
onClick={() => {
setSelectedCity(item.name)
action.setGlobalState({ globalLocation: {
station: item.name,
SUID: item.SUID
} })
}}
>
{item.name}
</Menu.Item>
))}
</Menu>
)
第三步：在子应用src目录下新建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(...args) {
return this.actions.onGlobalStateChange(...args)
}
/**
* 映射
*/
setGlobalState(...args) {
return this.actions.setGlobalState(...args)
}
}
const actions = new Actions()
export default actions
第四步：在子项目的入口文件中设置子应用的全局state
import React from 'react'
import ReactDOM from 'react-dom'
import { Router } from 'react-router-dom'
import { history } from './routerConfig'
import LayoutMain from './layout/index'
import zhCN from 'antd/lib/locale/zh_CN'
import 'moment/locale/zh-cn'
import { ConfigProvider } from 'antd'
import action from '@/action'//引入子应用中创建的action.js
function render() {
ReactDOM.render(
<Router history={history}>
<ConfigProvider getPopupContainer={(node) => node} locale={zhCN}>
<div id="container-sub2">
<LayoutMain />
</div>
</ConfigProvider>
</Router>,
document.getElementById('root_mannualRecord')
)
}
if (!window.__POWERED_BY_QIANKUN__) {
render()
}
export async function bootstrap() {}
export async function mount(props) {
action.setActions(props)
props.onGlobalStateChange((state) => {
props.setGlobalState(state)
})
render()
}
export async function unmount() {
if (document.getElementById('root_mannualRecord') !== null) {
ReactDOM.unmountComponentAtNode(
document.getElementById('root_mannualRecord')
)
}
}
在子项目的任意组件中useEffect或者componentDidMount中拿数据就可以了
import React, { useEffect, useState } from 'react'
import api from '@/api'
import action from '@/action'
const Gas = () => {
useEffect(() => {
action.onGlobalStateChange((state) => {
setSuid(state?.globalLocation?.SUID)
api
.getGases({
page,
limit,
meter_num: gasNumber,
start_time: queryTime[0],
end_time: queryTime[1],
SUID: state?.globalLocation?.SUID,
})
.then((res) => {
setData(res)
})
}, true)
}, [])
