使用mobx实现react的MVVM框架mobx-roof，比redux简单太多
Mobx-Roof
Mobx-Roof219是基于mobx123的简单React MVVM框架, 目标是通过更ORM化的思维来管理数据, 如通过
下边完整的例子可以在项目
基础篇
先看下要实现的效果
1.创建模型
我们先通过
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组件
通过
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！