Javascript 基于计算值为真的Mobx自动运行

我对MobX还是相当陌生的，我理解计算、自动运行、可观测的概念。但我正与一个特定的场景作斗争。我的商店中有以下代码（我使用的是mobx状态树）：

现在基本上，我想在计算值为真时运行函数

loadConfigurations

。在这个场景中，我希望在renderingState为stage3且containerMounted为true时运行我的函数。根据我对自动运行的理解，它将在计算值发生变化时立即启动。但是我希望我的函数在if语句有效时启动

---

如果您有任何见解或可以帮助澄清我的任何误解，那就太好了。

第一个问题是您的

isReady

属性没有计算出来。要使它成为一个计算机，它应该是这样的

    .views(self => ({
        //computed value
        get isReady(): boolean {
            if (self.renderingState === 'stage3' && self.containerMounted) {
                return true;
            }

            // add the default value
            return false;
        }
    }))

export const store = types
    .model({
        renderingState: types.optional(types.string, 'stage1'),
        containerMounted: types.optional(types.boolean, false),
    })
    .actions(self => ({
      afterCreate() {
        addDisposer(self, reaction(
          () => {
            return self.isReady
          },
          () => {
            if (self.isReady) {
              // your logic should go here
            }
          }
        ))  
      }
    }))
    .views(self => ({
        //computed value
        get isReady() {
            if (self.renderingState === 'stage3' && self.containerMounted) {
                return true;
            }

            return false;
        }
    }))

既然isReady是一个计算属性，您只需在自动运行中使用它即可

autorun(() => {
    if (myStore.isReady) {
        // your logic goes inside the if
        console.log("My store is ready")
    }
})

或

每当isReady更改其值true/false时，

autorun

中的函数将运行 当它从false变为true时，逻辑将被执行

TBH我并没有真正使用

autorun

，我喜欢在

afterCreate

方法中使用

reaction

    .views(self => ({
        //computed value
        get isReady(): boolean {
            if (self.renderingState === 'stage3' && self.containerMounted) {
                return true;
            }

            // add the default value
            return false;
        }
    }))

export const store = types
    .model({
        renderingState: types.optional(types.string, 'stage1'),
        containerMounted: types.optional(types.boolean, false),
    })
    .actions(self => ({
      afterCreate() {
        addDisposer(self, reaction(
          () => {
            return self.isReady
          },
          () => {
            if (self.isReady) {
              // your logic should go here
            }
          }
        ))  
      }
    }))
    .views(self => ({
        //computed value
        get isReady() {
            if (self.renderingState === 'stage3' && self.containerMounted) {
                return true;
            }

            return false;
        }
    }))

---

addDisposer是mobx中的内置函数吗？@Pavan addDisposer是mobx状态树的内置函数