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