一、先贴下版本
二、主目录新建store文件
store/index.js是引入store目录下的其他js文件
import Breadcrumb from './breadcrumb';
import UI from './ui';
export default { Breadcrumb, UI};
以store/ui.js 为例,mobx详细使用:
1、@observable 定义变量; 2、@action 定义方法; 3、runInAction,async await 处理异步请求。
import { observable, action, configure, runInAction } from 'mobx';
import loginApi from 'api/login';
configure({ enforceActions: 'observed' });
class UI {
// 获取消息
@observable willExpirationList = [];
@observable tipVisible = false;
@action getWillExpirationList = async () => {
let data = await loginApi.getWillExpirationList().then((res) => {
return res.data.data;
});
runInAction(() => {
this.willExpirationList = data;
});
};
// 左侧展示隐藏
@observable collapsed = false;
@action toggleCollapsed = () => {
this.collapsed = !this.collapsed;
};
@action reset() {
this.collapsed = false;
}
}
const ui = new UI();
export default ui;
三、在入口文件引入store
// mobx
import { Provider } from 'mobx-react';
import store from 'store/index';
ReactDom.render(
<AppContainer>
<Provider {...store}>
<RootElement />
</Provider>
</AppContainer>, document.getElementById('app') );
四、class组件中使用
import React from 'react';
import { observer, inject } from 'mobx-react';
import { Menu } from 'antd';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import cx from 'classnames';
@inject('UI')
@observer
class LeftMenu extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
toggleCollapsed = () => {
this.props.UI.toggleCollapsed();
};
render() {
const { collapsed } = this.props.UI;
return (
<div className={cx({ 'left-menu': true, 'left-menu-collapsed': collapsed === true })}>
<div className="open-menu" onClick={this.toggleCollapsed}>
{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
</div>
<Menu mode="inline" theme="dark" inlineCollapsed={collapsed} inlineIndent={15}></Menu>
</div>
);
}
}
export default LeftMenu;
五、函数式组件中使用
import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Menu } from 'antd';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import cx from 'classnames';
const LeftMenu = (props) => {
const { collapsed } = props.UI;
const toggleCollapsed = () => {
props.UI.toggleCollapsed();
};
return (
<div className={cx({ 'left-menu': true, 'left-menu-collapsed': collapsed === true })}>
<div className="open-menu" onClick={toggleCollapsed}>
{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
</div>
<Menu mode="inline" theme="dark" inlineCollapsed={collapsed} inlineIndent={15}></Menu>
</div>
);
};
export default withRouter(inject('UI')(observer(LeftMenu)));
小贴士: 当
observer
需要组合其它装饰器或高阶组件时,请确保observer
是最深处(第一个应用)的装饰器,否则它可能什么都不做。
结束。