reactjs - 在 MobX 中如何从 StoreA 中引用 StoreB 的可观察对象

我只想将 StoreA 的一个 observable 传递给 StoreB，而不传递整个 StoreA。

这里有一个例子，我在 TodoStore 的构造函数中传入了来自 UserStore 的 user 可观察对象，但显然当我改变该可观察对象时，它不会更新。

所以问题是如何以最干净、最简短的方式来做，而不传递完整的 UserStore 引用？

import * as React from "react";
import { render } from "react-dom";
import { observer } from "mobx-react";
import { observable, computed, action } from "mobx";

export class TodoStore {
  @observable public todos: string[] = [ "default" ];
  private user:string;

  constructor(user:string) {
    this.user = user;
  }

  @action.bound
  public addTodo = (todo: string) => {
    this.todos.push(this.user + ": " + todo);
  };
}

export class UserStore {
  @observable public user: string = "zubi";

  @action.bound
  public change = (name: string) => {
    this.user = name;
  };
}

var userStore = new UserStore();
var todoStore = new TodoStore(userStore.user);

@observer
class App extends React.PureComponent {
  public render() {
    return (
      <div>
        <button onClick={e => {todoStore.addTodo("hello" + Math.floor(Math.random() * 1000));}}>
          add message
        </button>
        <button onClick={e => { userStore.change("Eve" + Math.floor(Math.random() * 100),);}}>
          change name
        </button>
        <div>
          {todoStore.todos.map(todo => { return <div key={todo}>{todo}</div>;})}
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

您可以在这里查看完整代码：https://codesandbox.io/s/mobx-test-zubi-pf1qn

非常感谢！

答案＃1

到目前为止，我发现最简单的方法大概是这样的：

export class TodoStore {

  @computed get user(): string {return this._user()};

  constructor(private _user: () => string) { }

  // ...

}

// ...

var todoStore = new TodoStore( () => userStore.user );

// ...

答案＃2

这是一个好决定，来自 mobx 文档的推荐