在react hooks中使用mobx

一、 定义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);