我如何访问另一个 mobx 商店中的 mobx 商店?
How can I access mobx store in another mobx store?
假设结构如下
stores/
RouterStore.js
UserStore.js
index.js
每个 ...Store.js
文件都是一个包含 @observable
和 @action
的 mobx 存储区 class。 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 class.
中的一个动作
但这似乎无法正常工作。
您提出的解决方案不起作用,因为您对包含观察值的商店实例感兴趣,而不是没有状态的商店 class。
鉴于商店依赖项之间没有任何循环,您可以将一个商店作为构造函数参数传递给另一个商店。
类似于:
routerStore = new RouterStore();
userStore = new UserStore(routerStore);
stores = {user: userStore, router: routerStore};
在这里,您将 routerStore 实例传递给 userStore,这意味着它将可用。例如:
class UserStore {
routerStore;
constructor(router) {
this.routerStore = router
};
handleLoggedIn = () => {
this.routerStore.transitionTo("/dashboard")
// Here the router has an observable/actions/... set up when it's initialized. So we just call the action and it all works.
}
}
另一种方法是在调用 userStore 中的函数时将另一个存储(例如 routerStore)作为参数传递。
在这种情况下你只需要传递一个link
只需创建全局商店并将 GlobalStore 的 link 传递给您需要访问的每个子商店:
// 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>
假设结构如下
stores/
RouterStore.js
UserStore.js
index.js
每个 ...Store.js
文件都是一个包含 @observable
和 @action
的 mobx 存储区 class。 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 class.
但这似乎无法正常工作。
您提出的解决方案不起作用,因为您对包含观察值的商店实例感兴趣,而不是没有状态的商店 class。
鉴于商店依赖项之间没有任何循环,您可以将一个商店作为构造函数参数传递给另一个商店。
类似于:
routerStore = new RouterStore();
userStore = new UserStore(routerStore);
stores = {user: userStore, router: routerStore};
在这里,您将 routerStore 实例传递给 userStore,这意味着它将可用。例如:
class UserStore {
routerStore;
constructor(router) {
this.routerStore = router
};
handleLoggedIn = () => {
this.routerStore.transitionTo("/dashboard")
// Here the router has an observable/actions/... set up when it's initialized. So we just call the action and it all works.
}
}
另一种方法是在调用 userStore 中的函数时将另一个存储(例如 routerStore)作为参数传递。
在这种情况下你只需要传递一个link
只需创建全局商店并将 GlobalStore 的 link 传递给您需要访问的每个子商店:
// 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>