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
版權宣告：本文為博主原創文章，轉載請附上博文連結！