Vuex命名空间Store复用同一模块时两个实例state同时被修改问题

你遇到的问题和命名空间的使用逻辑无关，问题出在可复用模块的state定义不符合Vuex规范：你在模块顶层定义了一个常量state对象，导出的state工厂函数每次都返回这个对象的引用，导致注册的filter1和filter2两个模块共享同一块状态内存，修改任意一个模块的状态都会同步影响另一个模块。

只需要调整filter.module.js的state定义，保证每次调用state工厂函数时都返回一个全新的状态对象即可：

const actions = {};
const mutations = {
  [SET_ID_FILTER](state, id) {
    state.idFilter = id;
  },
};
const getters = {
  getFilter(state) {
    return state.idFilter;
  },
};
export default {
  namespaced: true,
  // 每次返回全新对象，切断模块间的状态引用关联
  state: () => ({
    idFilter: null
  }),
  actions,
  mutations,
  getters
};

修改后两个模块的状态会完全隔离，你原有提交mutation、读取状态的代码不需要做任何调整，即可实现两个表格筛选配置互不干扰的需求。

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