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

mobx在嚴格模式下,不允許在 action 外更改任何狀態。但是不同版本嚴格模式的用法不同,3.x、4.x、5.x三個版本下的嚴格模式用法。

1、[email protected]:useStrict(boolean)

2、[email protected]:configure({ enforceActions: boolean })

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

3、[email protected]:configure({ enforceActions: value })

[email protected]之後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
版權宣告:本文為博主原創文章,轉載請附上博文連結!