如何在React组件中观测myStore的varToObserve变量？

我有一个名为myStore的Mobx Store，代码如下：
myStore.jsx

@observer
class myStore {
  @observable public varToObserve;
  // ...... 其余逻辑
}

还有一个对该Store的包装类myStoreWrapper.js，代码如下：

class myStoreWrapper {
  myStore = globalStore.get('myStore');
}
export default new myStoreWrapper();

我无法直接访问myStore，只能通过myStoreWrapper访问，想要观测其中的varToObserve变量，请问以下哪种方法正确？

方法A #

@observer
class myClass {
  logic() {
    return myStoreWrapper.myStore.varToObserve;
  }
  render(){
    <myComponent myProp={this.logic()} />
  }
}

方法B #

@observer
class myClass {
  @observable varToObserve = myStoreWrapper.myStore.varToObserve;

  @computed
  logic() {
    return this.varToObserve;
  }
  render(){
    <myComponent myProp={this.logic()} />
  }
}

正确答案：方法A #

方法A是正确的，原因如下：

• Mobx的@observer装饰器会自动追踪组件内直接访问的可观测变量，当myStoreWrapper.myStore.varToObserve发生变化时，组件会感知到这个依赖并触发重新渲染，确保myComponent能拿到最新值。

方法B存在明显问题：

• 这里的@observable varToObserve只是在组件初始化时，把Store里的varToObserve值赋值了一次，之后Store内的varToObserve更新时，组件内的这个变量不会同步变化——它是一个独立的可观测变量，和Store里的值没有响应式关联，完全达不到观测Store变量的需求。

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