mobox5的模块化方法，自动导入模块化；

Posted 2022-12-11 勇敢*牛牛

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 Count

模块化导入：
注意的是导出以后在组件在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()