Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 22|回复: 0

[Web 前端] mobx教程(五)-Mobx常见问题及解决方案(1)Mobx使用严格模式

[复制链接]
  • TA的每日心情
    奋斗
    昨天 16:33
  • 签到天数: 146 天

    [LV.7]常住居民III

    1422

    主题

    1479

    帖子

    7万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    71008
    发表于 2021-9-7 10:06:50 | 显示全部楼层 |阅读模式

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

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2021-10-19 04:43 , Processed in 0.059592 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

    快速回复 返回顶部 返回列表