一、 定义store
创建文件名为mobxStore的js文件
import { observable, action, computed, decorate } from 'mobx';
class MyStore {
queryLoading = false;
releaseLoading = false;
tableList = [];
setQeuryLoading(status) {
this.queryLoading = status;
}
setReleaseLoading(status) {
this.releaseLoading = status;
}
get getQueryDataList() {
return this.tableList;
}
}
decorate(MyStore, {
tableList: observable,
queryLoading: observable,
releaseLoading: observable,
setQeuryLoading: action,
setReleaseLoading: action,
getQueryDataList: computed,
});
export const store = new MyStore();
由于装饰器还是提案状态,因此使用@action会被eslint警告,使用mobx中decorate进行处理。
二、使用Provide包裹组件,使得所有组件都能获取数据。
创建文件名为index.js文件
import React from 'react';
import { Provider } from 'mobx-react';
import { store } from './store/mobxStore';
import TableList from './TableList';
export default function PullPlan() {
return (
<Provider store={store}>
<TableList />
</Provider>
);
}
三、在hooks文件中使用可观察数据
定义文件名为TableList.js文件
import React, { Fragment } from 'react';
import { inject, observer } from 'mobx-react';
import { Content, Header } from 'components/Page';
import { Button } from 'antd';
const TableList = observer(({ store }) => {
function handleRelease() {
console.log('触发');
store.setReleaseLoading(true);
const a=store.getQueryDataList;
console.log(a, 'a');
}
return (
<Fragment>
<Header>
<Button>导出</Button>
<Button onClick={handleRelease} loading={store.releaseLoading}>
下达
</Button>
<Button>新增</Button>
</Header>
</Fragment>
);
});
export default inject(store => store)(TableList);