基于mobx重构TASKOA案例 #

/*PersonalStore.js*/
class PersonalStore {
    constructor(root) {
        this.root = root;
    }
}
export default PersonalStore;

/*TaskStore.js*/
import { observable, action, runInAction } from 'mobx';
import { getTaskList } from '../api';
class TaskStore {
    constructor(root) {
        this.root = root;
    }
    @observable taskList = null;
    // 异步获取全部任务
    @action.bound async queryTaskListAction() {
        let list = [];
        try {
            let result = await getTaskList(0);
            if (+result.code === 0) {
                list = result.list;
            }
        } catch (_) { }
        runInAction(() => {
            this.taskList = list;
        });
    }
    // 同步删除某个任务
    @action.bound removeTaskAction(id) {
        if (!Array.isArray(this.taskList)) return;
        this.taskList = this.taskList.filter(item => {
            return +item.id !== +id;
        });
    }
    // 同步修改某个任务
    @action.bound updateTaskAction(id) {
        if (!Array.isArray(this.taskList)) return;
        this.taskList = this.taskList.map(item => {
            if (+item.id === +id) {
                item.state = 2;
                item.complete = new Date().toLocaleString('zh-CN');
            }
            return item;
        });
    }
}
export default TaskStore;

/*index.js*/
import TaskStore from "./TaskStore";
import PersonalStore from "./PersonalStore";
import { configure } from 'mobx';
configure({
    enforceActions: 'observed'
});
class Store {
    constructor() {
        this.task = new TaskStore(this);
        this.personal = new PersonalStore(this);
    }
}
export default new Store();

/* index.jsx */
import store from './store';
import { Provider } from 'mobx-react';
...
root.render(
    <ConfigProvider locale={zhCN}>
        <Provider {...store}>
            <Task />
        </Provider>
    </ConfigProvider>
);

/* Task.jsx */
import { observer, inject } from 'mobx-react';
const Task = function Task(props) {
    /* 获取TASK模块的Store实例 */
    let { task } = props;

    /* 关于TABLE和数据的处理 */
    useEffect(() => {
        (async () => {
            if (!task.taskList) {
                setTableLoading(true);
                await task.queryTaskListAction();
                setTableLoading(false);
            }
        })();
    }, []);
    useEffect(() => {
        let { taskList } = task;
        if (!taskList) taskList = [];
        if (selectedIndex !== 0) {
            taskList = taskList.filter(item => {
                return +item.state === selectedIndex;
            });
        }
        setTableData(taskList);
    }, [selectedIndex, task.taskList]);

    ......
};
export default inject('task')(observer(Task));