在大型项目中组织 MobX 目录和使用 MobX 进行状态管理

在大型项目中，组织 MobX 目录和使用 MobX 进行状态管理非常重要。以下是一个推荐的目录结构和使用 MobX 的代码示例。

目录结构

src/
├── components/
│   ├── Cart.tsx
│   ├── Navbar.tsx
│   └── ProductList.tsx
├── pages/
│   ├── _app.tsx
│   ├── index.tsx
│   └── cart.tsx
├── stores/
│   ├── index.ts
│   ├── ProductStore.ts
│   ├── CartStore.ts
│   └── RootStore.ts
├── services/
│   └── api.ts
├── styles/
│   ├── globals.css
│   ├── Home.module.css
│   └── Cart.module.css
└── utils/
    └── helpers.ts

1. 创建 RootStore

RootStore 用于组织和管理所有子 store。

// stores/RootStore.ts
import ProductStore from './ProductStore';
import CartStore from './CartStore';

class RootStore {
   
  productStore: ProductStore;
  cartStore: CartStore;

  constructor() {
   
    this.productStore = new ProductStore(this);
    this.cartStore = new CartStore(this);
  }
}

export default RootStore;

2. 创建 ProductStore

ProductStore 用于管理商品相关的状态和操作。

// stores/ProductStore.ts
import {
    makeAutoObservable } from 'mobx';
import RootStore from './RootStore';

class ProductStore {
   
  rootStore: RootStore;
  products = [];

  constructor(rootStore: RootStore) {
   
    this.rootStore = rootStore;
    makeAutoObservable(this);
  }

  setProducts(products) {
   
    this.products = products;
  }

  async fetchProducts() {
   
    const response = await fetch('/api/products');
    const products = await response.json();
    this.setProducts(products);
  }
}

export default ProductStore;

3. 创建 CartStore

CartStore 用于管理购物车相关的状态和操作。

// stores/CartStore.ts
import {
    makeAutoObservable } from 'mobx';
import RootStore from './RootStore';

class CartStore {
   
  rootStore: RootStore;
  cart