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

Question

我对 MobX 还是很陌生，我了解计算、自动运行、可观察的概念。但我正在为某种情况而苦苦挣扎。我的商店中有以下代码（我正在使用 mobx-state-tree）：

export const store = types
    .model({
        renderingState: types.optional(types.string, 'stage1'),
        containerMounted: types.optional(types.boolean, false),
    })
    .views(self => ({
        //computed value
        isReady() {
            if (self.renderingState === 'stage3' && self.containerMounted) {
                return true;
            }
        }
    }))

现在基本上，我想在计算值为真时运行一个函数loadConfigurations。在这种情况下，我想在 renderState 为 stage3 且 containerMounted 为 true 时运行我的函数。根据我对自动运行的理解，一旦计算值发生变化，它就会触发。但我希望我的函数在 if 语句有效时触发。

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

Answer 1

第一个问题是您的 isReady 属性未计算。为了使它成为一个计算它应该是这样的

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

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

现在 isReady 是一个计算属性，您可以在 autorun 中简单地使用它

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

或

autorun(() => {
    if (!myStore.isReady) {
        return false
    }

    // your logic goes here
})

autorun 中的函数将在每次 isReady 更改它的值时运行，true/false 当它从 false 变为 true 时，逻辑将被执行。

TBH 我并没有真正使用autorun，我喜欢在这样的afterCreate 方法中使用reaction

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;
        }
    }))