javascript - 我如何访问另一个 mobx 商店中的 mobx 商店？

Question

假设结构如下

stores/
  RouterStore.js
  UserStore.js
  index.js

每个 ...Store.js 文件都是一个包含 @observable 和 @action 的 mobx 存储类。 index.js 只是导出所有商店，所以

import router from "./RouterStore";
import user from "./UserStore";

export default {
  user,
  router
};

访问一家商店内另一家商店的正确方法是什么？即在我的 UserStore 中，我需要在用户身份验证更改时从 RouterStore 发送操作。

我厌倦了从 UserStore 中的 import store from "./index" 然后使用 store.router.transitionTo("/dashboard") (transitionTo) 是 RouterStore 类中的一个 Action 。

但这似乎不能正常工作。

Answer 1

在这种情况下你只需要传递一个链接

只需创建全局商店并将 GlobalStore 的链接传递给您需要访问的每个子商店:

// global parent store
class GlobalStore {
    constructor() {
        this.routerStore = new RouterStore(this);
        this.userStore = new UserStore(this);
        // ... another stores
    }
}

// access in child
class UserStore {
    constructor(rootStore) {
        this.routerStore = rootStore.routerStore;
    }

    // ...
}

// In root component:
<MobxProvider {...new GlobalStore()}>
  <App />
</MobxProvider>