为何多个controller函数实例生成的store状态会相互共享？

这个问题本质是JavaScript引用类型的共享特性导致的，和createStore、controller的调用逻辑无关：

• 导入的initialState是对象类型，JS中对象属于引用类型，每次调用createStore(initialState)时，只是把这个对象的内存引用传给了createStore内部的state变量，并没有生成新的独立对象
• 所有controller实例生成的store，内部持有的state都指向同一个initialState的内存地址，任意修改都会作用到同一个对象上，自然会互相影响

方案1：修改createStore，内部对初始值做拷贝 #

让createStore每次初始化时都生成独立的新对象，避免共享引用。单层对象场景用浅拷贝即可，如有嵌套对象可以替换为深拷贝逻辑：

const createStore = (initialState) => {
  // 对初始值做浅拷贝，生成新对象
  const state = {...initialState};
  // 嵌套对象场景可以用深拷贝，示例：
  // const state = JSON.parse(JSON.stringify(initialState));
  // 也可以用lodash的cloneDeep等成熟深拷贝方法

  const get = () => state;
  const set = (key, value) => (state[key] = value);

  return {
    get,
    set
  };
};

方案2：调用createStore时传入新的初始值对象 #

在controller调用createStore时，每次都传入新的独立初始值，不要复用同一个initialState引用：

const controller = () => {
  // 每次都生成新的初始对象传入
  const store = createStore({
    // 直接定义初始值，或者对导入的initialState做拷贝：{...initialState}
    string: '默认值'
  });

  const setStore = (key, val) => store.set(key, val);
  const getStore = () => store.get().string;

  return {
    setStore,
    getStore
  };
};

两种方案任选其一即可解决不同实例store互相干扰的问题。

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