[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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！