Mobx Store间能否实现继承？React/Mobx组件Store复用方案咨询

当然有更优雅的处理方案！针对你这种两个Store高度相似的场景，Mobx完全支持通过类继承来复用逻辑，除此之外还有几种其他思路可以参考，我给你详细拆解下：

这应该是最适合你的方案，因为两个Store有95%的内容一致，继承可以最大化复用公共代码，同时保留各自的差异化逻辑。

具体实现步骤 #

1. 先创建一个基础Store类，把所有公共的状态、方法、异步逻辑都放在这里：

import { makeAutoObservable } from "mobx";

class BaseComponentStore {
  // 公共状态
  commonInputValue = "";
  isLoading = false;
  commonList = [];

  constructor() {
    // 让Mobx自动追踪父类的所有状态和方法
    makeAutoObservable(this);
  }

  // 公共同步方法
  updateCommonInput(value) {
    this.commonInputValue = value;
  }

  // 公共异步逻辑（用flow处理更优雅）
  fetchCommonData = flow(function* () {
    this.isLoading = true;
    try {
      // 这里是公共的请求逻辑，比如调用API获取通用列表
      const response = yield fetch("/api/common-data");
      this.commonList = yield response.json();
    } catch (error) {
      console.error("公共数据请求失败:", error);
    } finally {
      this.isLoading = false;
    }
  });
}

2. 然后让两个业务Store继承这个基础类，只实现各自独有的状态和方法：

// 组件A的Store
class ComponentAStore extends BaseComponentStore {
  // A组件独有的状态
  aSpecificCounter = 0;

  constructor() {
    // 必须调用super()初始化父类的Observable状态
    super();
    // 让Mobx追踪子类新增的状态和方法
    makeAutoObservable(this);
  }

  // A组件独有的方法
  incrementACounter() {
    this.aSpecificCounter += 1;
  }
}

// 组件B的Store
class ComponentBStore extends BaseComponentStore {
  // B组件独有的状态
  bSpecificTags = [];

  constructor() {
    super();
    makeAutoObservable(this);
  }

  // B组件独有的方法
  addBTag(tag) {
    this.bSpecificTags.push(tag);
  }
}

注意事项 #

• 子类必须调用super()来初始化父类的构造函数，否则父类的Observable状态不会被正确追踪。
• 如果父类使用的是makeObservable（手动配置追踪），子类需要注意覆盖配置，但推荐用makeAutoObservable，它会自动处理父类和子类的所有成员。

如果你担心类继承带来的耦合问题（比如未来基础Store的修改可能影响子类），可以把公共逻辑抽成独立的模块，通过组合的方式注入到业务Store中：

// 抽离的公共逻辑模块
class CommonStoreModule {
  commonState = "";
  isLoading = false;

  constructor() {
    makeAutoObservable(this);
  }

  setCommonState(value) {
    this.commonState = value;
  }

  fetchCommonData = flow(function* () {
    this.isLoading = true;
    try {
      // 公共请求逻辑
    } finally {
      this.isLoading = false;
    }
  });
}

// 组件A的Store，组合公共模块
class ComponentAStore {
  // 注入公共模块
  common = new CommonStoreModule();
  // 独有状态
  aSpecificState = 0;

  constructor() {
    makeAutoObservable(this);
  }

  incrementACounter() {
    this.aSpecificState += 1;
  }
}

在组件中使用时，通过store.common.commonState访问公共状态，这种方式的好处是解耦性更强，公共模块可以被多个Store复用，也更容易单独测试。

如果你的Store逻辑更偏向函数式风格，可以用高阶函数来封装公共逻辑，然后在业务Store中扩展：

import { observable, action, flow } from "mobx";

// 高阶函数，返回公共的状态和方法
function withCommonStoreLogic() {
  const commonState = observable("");
  const isLoading = observable(false);

  const setCommonState = action((value) => {
    commonState.set(value);
  });

  const fetchCommonData = flow(function* () {
    isLoading.set(true);
    try {
      // 公共请求逻辑
    } finally {
      isLoading.set(false);
    }
  });

  return {
    commonState,
    isLoading,
    setCommonState,
    fetchCommonData
  };
}

// 组件A的Store
class ComponentAStore {
  aSpecificState = observable(0);

  constructor() {
    // 合并公共逻辑到当前Store
    Object.assign(this, withCommonStoreLogic());
    makeAutoObservable(this);
  }

  incrementACounter = action(() => {
    this.aSpecificState += 1;
  });
}

这种方式比较灵活，适合需要动态添加公共逻辑的场景，但可读性不如类继承和组合式。

针对你的场景，类继承是最优解，因为它最直观，能最大化复用代码，同时保留两个Store各自的差异化逻辑。如果未来业务变化导致两个Store的差异变大，再考虑切换到组合式复用也很容易。

内容的提问来源于stack exchange，提问作者Sveta