[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
版权声明:本文为博主原创文章,转载请附上博文链接!

上一篇:Linux源代码编译安装tree命令


下一篇:为人们服务的asp.net 验证控件