【mobox5】的模块化方法，自动导入模块化；-CFANZ编程社区

mobx开启严格模式修改响应式数据

在获取数据的异步方法中，再次来修改响应属性中的数据,默认为never，在任何的位置都可以去修改，不建议如果开启了always，就通过一个外部的action；来实现响应式数据的修改。

import { observable, computed, action,configure } from "mobx";
// 修改当前mobx的执行模式
// always 严格模式
configure({enforceActions:"always"})
// 定义一个类
class Store {
    @observable 
    users = [];

    @action.bound
    async setUsers(n) {
        let ret = await (await fetch('/api/users?name'+n)).json()//网络请求模拟mock
        console.log(ret.data);
        // 在获取数据的异步方法中，再次来修改响应属性中的数据,默认为never，在任何的位置都可以去修改，不建议 always
        // 如果 把执行模式修改为严格 configure({ enforceActions: 'always' })，就不能在此处直接去修改响应数据值
        // this.users.push({name:Date.now()},...ret.data);//这样就会报错
        this.setuser(ret.data)//不会报错
    }
     @action.bound
    setuser(data) {
        this.users.push({name:Date.now()},...data)
    }
    
}
// {store:store对象实例}
export default { store: new Store() };

如果开启了强制模式，但是还想在当前的action中完成对于响应数据的修改 – 不推荐

import { observable, computed, action,configure,runInAction} from "mobx";
runInAction(()=>{
  this.users.push({name:Date.now()},...ret.data);
})

mobx模块化

小知识点：

扩展运算，是可以把构造函数方法或属性进行展开，不在此处的，不可以展开的，有这个玩意的就可以展开[Symbol.iterator]

class Demo {
  // 扩展运算，是可以把构造函数方法或属性进行展开，不在此处的，不可以展开的 [Symbol.iterator]
  constructor() {
    this.name = 'aa'
    this.age = 10
  }

  getName() {}
}
const d = new Demo()
console.log({ ...d })

模块化count

import { observable, computed, action,configure,runInAction} from "mobx";

// 定义一个类
class Count {
    @observable
    num = 100;

    @action.bound
    setNum(n) {
        this.num += n;
        console.log(n, this.num);
    }

}
export default

模块化导入：
注意的是导出以后在组件在inject的名称为模块名

import Count from "./modules/count"
import users from "./modules/users"
// 定义一个类
class Store {
    constructor(){
        // 模块user 成员属性user，相当于命名空间名称
        this.count = new Count()
        this.users = new users()
    }
}
export default new Store()
// 导出一个实例对象
// 在mobx-react中 inject的名称为当前对应的成员属性名称

使用：
导入一个模块就是数组或者直接是字符串
inject导入多个只能使用字符串

import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'

@inject('count',"users") // 把count和users模块映射到this.props中
@observer // 1.让组件变化是一个响应式的组件
class App extends Component {
   
    render() {
        console.log(this.props);
        let {num,setNum}= this.props.count
        let {users,setUsers}= this.props.users
        return (
            <div>
                <h1>{this.props.count.num}</h1>
                <button onClick={()=>{setNum(20)}}>+++++</button>
                <hr />

                <h2>{JSON.stringify(users)}</h2>
                <ul>
                    {
                        users.map((item,index)=>(
                            <li key={index}>name:{item.name}</li>
                        ))
                    }
                </ul>
                <button onClick={e=>{setUsers()}}>添加姓名</button>
            </div>
        );
    }
}

export default App;

mobx5模块化的自动导入：

// 定义一个类
class Store {
    constructor(){
        const moduleFn = require.context("./modules",false,/\.js$/);
        moduleFn.keys().forEach(item=>{
            let key = /\.\/(\w+)\.js/.exec(item)[1]
            let value = new (moduleFn(item).default)();
            this[key] = value
            
        })
    }
}
export default new Store()