使用mobx实现react的MVVM框架mobx-roof，比redux简单太多

Mobx-Roof

Mobx-Roof219是基于mobx123的简单React MVVM框架, 目标是通过更ORM化的思维来管理数据, 如通过继承, 重载 等面向对象方式来实现数据模型的扩展, 并通过Relation来实现数据间的关联.

下边完整的例子可以在项目example目录中找到

基础篇

先看下要实现的效果

1.创建模型

我们先通过createModel创建一个用户登录数据模型:

• name: 定义类名, 类名首字母大写
• data: 可以通过对象声明或者函数声明, 函数返回的数据会被转换成mobx的observable data, 函数的第一个参数可以当成Model实例化的初始数据
• actions: 定义模型的方法, 可以使用async/await处理异步方法, 方法返回值会转换成Promise, 其中对象提供了set方法可以快速修改多个数据, 而toJS 方法可以将数据转换成JSON格式
• autorun: 可以在所依赖数据变动时候自动运行定义的函数, 下边例子当User数据发生变化时候会自动保存到localStorage

import { createModel } from 'mobx-roof';
import * as api from '../api';
const STORE_KEY = 'mobx-roof';

export default createModel({
  name: 'User',
  data(initData) {
    // 从localStorage初始化数据
    let data = localStorage.getItem(STORE_KEY);
    data = data ? JSON.parse(data) : {};
    return {
      isLogin: false,
      userId: null,
      loginError: '',
      // ...
      ...data,
    };
  },
  actions: {
    async login(username, password) {
      const res = await api.login(username, password);
      if (res.success) {
        // 使用set只会触发一次数据变动事件
        this.set({
          userId: res.id,
          isLogin: true,
          // ...
        });
      } else {
        // 直接赋值会触发一次数据变动事件
        this.loginError = res.message;
      }
    },
  },
  autorun: {
    saveToLocalStorage() {
      localStorage.setItem(STORE_KEY, JSON.stringify(this.toJS()));
    },
  },
});

2.绑定到react组件

通过