mobx 6 关于computed 不更新的bug - 成就云开发者社区

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

今日分享： 使用mobx时，遇到的关于computed不更新

项目代码：

代码语言：javascript

复制

 constructor(){
        makeAutoObservable(this)
 }
 get user(){ 
       if(sessionStorage.getItem("user")){
           return JSON.parse(sessionStorage.getItem("user"));
       }
        return {};
}
set user(data){
        sessionStorage.setItem("user",JSON.stringify(data));
}

问题描述：

登录成功后，修改user的值，组件不能得到新的值，要刷新后才能获取值

代码语言：javascript

复制

login=(userInput)=>{
        // 只进行数据处理，不进行界面的提示信息
        return new Promise((resolve,reject)=>{
            // 1. 发起axios请求
            service.userSerive.User_Login(userInput).then((data)=>{
                this.user=data.data;
                resolve(data);
            }).catch((err)=>{
                reject(err);
            })
        });
    }

相关文档：

计算值可以有 setters 你也可以为计算值定义一个 setter。需要注意的是，这些 setters 不能直接更改计算属性的值，但是它们可以被当作派生的“逆操作”使用。setters 会被自动标记为 actions。 https://zh.mobx.js.org/computeds.html#computed-struct

例如：

代码语言：javascript

复制

class Dimension {
    length = 2
constructor() {
    makeAutoObservable(this)
}

get squared() {
    return this.length * this.length
}
set squared(value) {
    this.length = Math.sqrt(value)
}

}

问题分析：

setters 会被标记为action , 调用了action是不会重新渲染，而要让重新渲染，还是要依赖 observable 变量发生改变。

而我项目中的代码中，直接操作的sessionStorage，而不是修改observable变量，故不会刷新

解决方案：

使用observable 变量，代码如下：

代码语言：javascript

复制

_user = sessionStorage.getItem("user")?JSON.parse(sessionStorage.getItem("user")):{};
get user(){

return this._user;

}

set user(data){

this._user = data;

sessionStorage.setItem("user",JSON.stringify(data));

}

苟有恒 , 何必三更眠五更起