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

Question

我只想将一个可观察到的StoreA传递给StoreB，而不传递完整的StoreA。

这里是一个示例，其中我从user传递了TodoStore的构造函数中的UserStore可观察值，但是当我更改可观察值时，显然它不会更新。

所以问题是如何在不通过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

非常感谢！

Answer 1

这是个好决定，建议改写自mobx docs

Answer 2

如果参考What does MobX react to?

您将了解mobx跟踪属性访问而不是值。因此，您可以传递一个specific可观察值，但它不能是原始值。

使UserStore.user成为对象，然后您就可以按照想要的方式（UserStore.user.name）等来跟踪其属性。

Answer 3

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

export class TodoStore {

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

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

  // ...

}

// ...

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

// ...