[Web 前端] mobx教程(五)-Mobx常见问题及解决方案（1）Mobx使用严格模式

copy from : https://blog.csdn.net/smk108/article/details/83185745

mobx在严格模式下，不允许在 action 外更改任何状态。但是不同版本严格模式的用法不同，3.x、4.x、5.x三个版本下的严格模式用法。

1、mobx@3.x：useStrict(boolean)

2、mobx@4.x：configure({ enforceActions: boolean })

迁移说明：https://github.com/mobxjs/mobx/wiki/Migrating-from-mobx-3-to-mobx-4#things-that-just-have-moved

3、mobx@5.x：configure({ enforceActions: value })

mobx@5.x之后enforceActions不再接收boolean值，传入boolean值会提示如下错误：

可接收的值为：

"never" (默认): 可以在任意地方修改状态

"observed": 在某处观察到的所有状态都需要通过动作进行更改。在正式应用中推荐此严格模式。

"always": 状态始终需要通过动作来更新(实际上还包括创建)。

文档地址：https://cn.mobx.js.org/refguide/api.html#enforceactions

4、关于严格模式的说明

Mobx的状态原则上是允许在任意地方进行修改，严格模式下，不允许在 action 外更改任何状态，实际上，在异步action中修改也是不允许的。我们以异步action为例看一下严格模式。

// 不允许在动作之外进行状态修改
mobx.configure({ enforceActions: "observed"}) 

class Store {
@observable data = [];
@observable fetchState = "";
    @action fetchData() {
        this.state = "pending"
    //异步请求数据
        fetchDataFunction().then(
            data => {
                this.data = data
                this.state = "done"
            },
            error => {
                this.state = "error"
            }
        )
    }
}

在上面的例子中会抛错，异步请求fetchDataFunction的回调函数不是action fetchData的一部分，不能在回调函数中修改state，需要做如下的代码改造。

// 不允许在动作之外进行状态修改
mobx.configure({ enforceActions: "observed"}) 

class Store {
@observable data = [];
@observable fetchState = "";
    @action fetchData() {
        this.state = "pending"
    //异步请求数据
        fetchDataFunction().then(
            data => this. fetchDataSuccess(data);
            error => this. fetchDataError(error);
        )
    }
}

@action
fetchDataSuccess(data){
    this.data = data
         this.state = "done"
}
@action
fetchDataError(error){
    this.state = "error"
}

还有其它几种方法可以解决严格模式下异步action修改state的问题，见文档：https://cn.mobx.js.org/best/actions.html

---------------------
作者：smk108
来源：CSDN
原文：https://blog.csdn.net/smk108/article/details/83185745
版权声明：本文为博主原创文章，转载请附上博文链接！