如何在一个mobx store访问另一个mobx store？
在 MobX 中，如果需要在一个 store 访问另一个 store，通常有几种方法可以实现这一目标。以下是几种常见的做法：
### 1. 通过构造函数注入依赖
在创建一个 store 实例时，可以把其他需要的 store 作为参数传递进去。这种方式类似于依赖注入，它允许每个 store 在初始化时就可以知道其它的 store。
```javascript
class StoreA {
constructor(storeB) {
this.storeB = storeB;
}
get someData() {
return this.storeB.someOtherData;
}
}
class StoreB {
someOtherData = "This is some data from StoreB";
}
const storeB = new StoreB();
const storeA = new StoreA(storeB);
```
在上面这个例子中，`StoreA` 在被创建时接收了 `StoreB` 的实例作为参数，并将其保存在自己的属性中。这样 `StoreA` 就可以方便地访问 `StoreB` 中的数据了。
### 2. 通过 Root Store 模式
Root Store 模式涉及创建一个主要的 store，通常称为 `RootStore`，它将包含所有其他子 store 的引用。然后，每个子 store 可以在构造函数中接收 `RootStore` 实参，并从中访问其他 store。
```javascript
class StoreA {
constructor(rootStore) {
this.rootStore = rootStore;
}
get someData() {
return this.rootStore.storeB.someOtherData;
}
}
class StoreB {
someOtherData = "This is some data from StoreB";
}
class RootStore {
constructor() {
this.storeB = new StoreB();
this.storeA = new StoreA(this);
}
}
const rootStore = new RootStore();
```
通过这种方式，所有的 store 都通过 `RootStore` 连接在一起，每个 store 都能够访问到根 store 中的其他 store 实例。
### 3. 使用 MobX 的 `context`
在使用 React 和 MobX 时，可以利用 React 的 context 系统来传递 stores。这对于在 React 组件树中访问 stores 特别有用。
```javascript
import React, { createContext, useContext } from 'react';
import { useLocalObservable } from 'mobx-react';
const StoreContext = createContext(null);
export const StoreProvider = ({ children }) => {
const store = useLocalObservable(() => ({
storeA: new StoreA(),
storeB: new StoreB(),
}));
return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
};
export const useStores = () => useContext(StoreContext);
```
在组件中使用 `useStores` 钩子函数，可以访问到 `storeA` 和 `storeB`：
```javascript
const MyComponent = () => {
const { storeA, storeB } = useStores();
// 使用 storeA 和 storeB
};
```
这些方法都提供了在不同 store 之间相互访问的方式，每种方式都有其适用场景和利弊。构造函数注入依赖和 Root Store 模式更适合于非 React 或者大型的 React 项目，而 context 方法则是专为 React 设计的。在实际项目中，应根据具体的架构需求和团队习惯选择合适的方法。在MobX中，有几种方法可以在一个store中访问另一个store。下面是常见的几种方法：
### 1. 通过构造函数注入
一个简单而直接的方法是在创建Store的时候，将其他的Store作为参数传递给它。例如：
```javascript
class StoreA {
constructor(storeB) {
this.storeB = storeB;
}
}
class StoreB {
// StoreB的方法和属性
}
const storeB = new StoreB();
const storeA = new StoreA(storeB);
```
这种方法的好处是清晰地声明了依赖，而且易于测试，因为你可以很容易地传递mocks或stubs。
### 2. 使用根store
通常，在较大的应用程序中，你会有一个“根”store，它持有其他所有子store的实例。这样，每个子store都可以通过根store访问其他的store。
```javascript
class RootStore {
constructor() {
this.storeA = new StoreA(this);
this.storeB = new StoreB(this);
}
}
class StoreA {
constructor(rootStore) {
this.rootStore = rootStore;
}
someMethod() {
// 直接通过根store访问StoreB的方法或属性
return this.rootStore.storeB.someProperty;
}
}
class StoreB {
// StoreB的方法和属性
}
const rootStore = new RootStore();
```
这种方式的好处是每个store都知道如何找到它需要的任何其他store，而不需要额外的引用或配置。
### 3. 使用Context（React环境下）
如果你的应用是用React开发的，并且你正在使用MobX来管理状态，则可以利用React的Context API来跨组件传递stores。
```javascript
import React, { createContext, useContext } from 'react';
const StoreContext = createContext();
const StoreProvider = ({ children, store }) => {
return (
<StoreContext.Provider value={store}>{children}</StoreContext.Provider>
);
};
// 使用自定义hook来访问store
const useStores = () => useContext(StoreContext);
// 在组件中使用
const MyComponent = () => {
const { storeA, storeB } = useStores();
// ...
};
```
在这种情况下，你可以在应用程序的顶部使用一个`StoreProvider`包装你的组件树，然后在需要的任何地方通过`useStores`自定义hook访问stores。
### 4. 使用全局变量或模块
虽然通常不推荐使用全局变量，但在某些简单的应用或快速原型制作中，你可能会选择简单地将stores作为全局变量或导出它们作为模块的一部分，如下所示：
```javascript
// stores.js
export const storeA = new StoreA();
export const storeB = new StoreB(storeA);
```
然后在需要的地方导入它们：
```javascript
import { storeA, storeB } from './stores';
// 使用storeB中的方法或属性
storeA.someMethod(storeB.someProperty);
```
这种方法简单快捷，但在大型应用程序中，它可能导致难以维护的代码和不清晰的依赖关系。
---
以上是几种在MobX中让store相互访问的方法。根据你的应用程序的具体需求和结构选择合适的方法。
阅读 109 · 6月27日 12:12
