如何在Vuex模块间复用state字段、actions及mutations？

针对你需要在多个Vuex模块间复用一组状态字段、Actions和Mutations，同时保证各模块字段独立不共享值的需求，最符合DRY原则的方案是使用模块工厂函数，具体实现如下：

1. 创建可复用的共享模块工厂 #

编写一个工厂函数，每次调用都会返回全新的共享模块配置，确保每个业务模块拿到的state都是独立对象：

// sharedModuleFactory.js
export default function createSharedModule() {
  return {
    state: {
      sharedFieldOne: '',
      sharedFieldTwo: 0
    },
    actions: {
      setSharedFieldOne({ commit }, value) {
        commit('SET_SHARED_FIELD_ONE', value);
      },
      setSharedFieldTwo({ commit }, value) {
        commit('SET_SHARED_FIELD_TWO', value);
      }
    },
    mutations: {
      SET_SHARED_FIELD_ONE(state, value) {
        state.sharedFieldOne = value;
      },
      SET_SHARED_FIELD_TWO(state, value) {
        state.sharedFieldTwo = value;
      }
    }
  };
}

2. 在业务模块中合并共享配置 #

在Todos、Heroes等业务模块里，调用工厂函数生成共享模块，再通过对象展开运算符将共享的state、actions、mutations合并到当前模块中：

TodosModule.js #

import createSharedModule from './sharedModuleFactory';

const sharedModule = createSharedModule();

export default {
  state: {
    todos: [],
    ...sharedModule.state // 合并共享状态字段
  },
  actions: {
    async saveTodos({ state }) {
      await this.Api.saveTodos({
        todos: state.todos,
        sharedFieldOne: state.sharedFieldOne,
        sharedFieldTwo: state.sharedFieldTwo
      });
    },
    setTodos({ commit }, newTodos) {
      commit('SET_TODOS', newTodos);
    },
    ...sharedModule.actions // 合并共享Actions
  },
  mutations: {
    SET_TODOS(state, newTodos) {
      Vue.set(state, 'todos', newTodos);
    },
    ...sharedModule.mutations // 合并共享Mutations
  }
};

HeroesModule.js #

import createSharedModule from './sharedModuleFactory';

const sharedModule = createSharedModule();

export default {
  state: {
    heroes: [],
    ...sharedModule.state
  },
  actions: {
    async saveHeroes({ state }) {
      await this.Api.saveHeroes({
        heroes: state.heroes,
        sharedFieldOne: state.sharedFieldOne,
        sharedFieldTwo: state.sharedFieldTwo
      });
    },
    setHeroes({ commit }, newHeroes) {
      commit('SET_HEROES', newHeroes);
    },
    ...sharedModule.actions
  },
  mutations: {
    SET_HEROES(state, newHeroes) {
      Vue.set(state, 'heroes', newHeroes);
    },
    ...sharedModule.mutations
  }
};

方案优势 #

• 状态独立：工厂函数每次返回全新的state对象，各业务模块的共享字段值完全独立，修改一个模块的字段不会影响其他模块；
• 符合DRY原则：共享的逻辑只需要维护一次，所有业务模块直接复用；
• 适配API架构：共享字段直接存在业务模块的state中，API调用时无需跨模块引用，完全匹配你现有模块与API耦合的架构。

你提到的Vuex文档中模块复用方案，是直接复用同一个模块对象导致状态共享，而工厂函数通过每次创建新实例完美解决了这个问题。

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