多文件/类场景下如何实现store对象的非全局共享访问？

这绝对是项目规模扩大后最容易踩的全局状态坑之一——我之前维护的一个大型应用也遇到过一模一样的问题，当时多个实例互相干扰差点搞崩测试环境😅。核心问题就是你说的：直接导出导入store会把它变成全局单例，所有主类实例共享同一个引用，改一个就全乱了。下面给你几个实用的解决方案，都是我实际用过的：

1. 依赖注入（最推荐的方案） #

本质就是把每个主类实例自己的store，主动传递给所有需要它的子模块/类。这样每个子模块绑定的都是当前主类实例的store，完全隔离。

示例代码： #

// 主类
class MainClass {
  constructor() {
    // 每个实例都有独立的store
    this.store = { userInfo: {}, config: {} };
    
    // 初始化子模块时传入当前实例的store
    this.userModule = new UserModule(this.store);
    this.configModule = new ConfigModule(this.store);
  }
}

// 子模块 UserModule
class UserModule {
  constructor(store) {
    // 持有当前主类实例的store引用
    this.store = store;
  }

  updateUserName(name) {
    // 只会修改所属主类实例的store
    this.store.userInfo.name = name;
  }
}

使用时，每个MainClass实例的store都是独立的：

const app1 = new MainClass();
const app2 = new MainClass();

app1.userModule.updateUserName("Alice");
console.log(app1.store.userInfo.name); // Alice
console.log(app2.store.userInfo.name); // undefined（完全不受影响）

2. 工厂函数/类工厂 #

如果你的子模块不是类，而是函数或者需要动态创建，用工厂模式把store作为参数传入，生成绑定了特定store的模块实例。

示例代码： #

// 模块工厂函数
function createConfigModule(store) {
  return {
    setTheme: (theme) => { store.config.theme = theme; },
    getTheme: () => store.config.theme
  };
}

// 主类中使用
class MainClass {
  constructor() {
    this.store = { config: {} };
    this.configModule = createConfigModule(this.store);
  }
}

这种方式更灵活，适合一些轻量的模块，不用写类也能实现状态隔离。

3. 上下文传递（适合无法初始化注入的场景） #

如果有些模块不能在初始化时直接传入store，可以让模块持有主类实例的引用，通过主类的方法来获取当前实例的store。

示例代码： #

class MainClass {
  constructor() {
    this.store = { data: {} };
  }

  // 暴露获取store的方法
  getCurrentStore() {
    return this.store;
  }
}

class DataModule {
  constructor(mainInstance) {
    this.mainInstance = mainInstance;
  }

  updateData(key, value) {
    const store = this.mainInstance.getCurrentStore();
    store.data[key] = value;
  }
}

// 使用
const app1 = new MainClass();
const dataModule1 = new DataModule(app1);
const app2 = new MainClass();
const dataModule2 = new DataModule(app2);

关键注意事项 #

• 彻底抛弃默认导出全局store的写法，所有需要访问store的地方，都必须通过「实例传递」的方式获取。
• 如果是React/Vue这类框架，可以用它们自带的状态隔离方案（比如React的Context、Vue的provide/inject），原理和依赖注入完全一致，只是框架帮你做了上下文传递的工作。

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