如何在MobX中实现两个互斥切换的状态？

你需要创建一个包含两个无法同时为true的布尔标志的对象，并且想知道MobX中makeObservable的配置写法。以下是正确的实现方式：

完整代码示例 #

import { makeObservable, observable } from "mobx";

class Store {
  private _flag1: boolean = false;
  private _flag2: boolean = false;

  get flag1() { return this._flag1; }
  set flag1(v: boolean) { 
    this._flag1 = v; 
    if (v) this._flag2 = false;
  }

  get flag2() { return this._flag2; }
  set flag2(v: boolean) { 
    this._flag2 = v; 
    if (v) this._flag1 = false;
  }

  constructor() {
    makeObservable(this, {
      flag1: observable,
      flag2: observable
    });
  }
}

关键说明 #

• 在makeObservable的配置对象中，直接将flag1和flag2标记为observable即可。MobX会自动识别这两个属性的getter/setter访问器，将其转化为可观察属性。
• 你的setter逻辑已经实现了互斥规则：当任意一个标志被设为true时，另一个标志会被强制设为false，确保二者不会同时为true。
• 如果不需要MobX追踪属性变化，其实可以省略makeObservable，但既然你需要使用MobX的响应式能力，上述配置就是正确的写法。

内容的提问来源于stack exchange，提问作者Sagi Mann