Vuex问题：如何从Mutation返回值到Action以获取新增对象

你遇到的问题其实是Vuex的设计规则导致的——Mutation本身不支持返回值，commit调用后不会把Mutation里的return值传递回来，所以你拿到undefined是完全正常的。Vuex的Mutation职责非常单一：仅用于同步修改state，并不承担返回数据的任务。

下面给你两种符合Vuex设计规范的解决方案：

方案1：在Action中生成guid，再传给Mutation #

既然你需要拿到这个guid，不如把生成逻辑放在Action里，Mutation只负责把带guid的item插入state。这样Action自然就能拿到guid，无需从Mutation获取：

mutations: {
  insert(state, item) {
    state.data.push(item);
    // 这里不再生成guid，也不需要return
  },
},
actions: {
  insert ({ commit }, data) {
    return new Promise((resolve) => {
      // 在Action里生成guid
      const guid = Math.floor(Math.random() * 6) + 1;
      const item = { ...data, guid }; // 把guid加到传入的data里
      commit('insert', item);
      resolve(guid); // 现在guid就能正常返回了
    });
  }
}

方案2：通过引用类型传递或临时存储state #

如果一定要在Mutation里生成guid（比如有统一的生成逻辑需要复用），可以通过两种方式让Action拿到这个值：

方式A：利用对象的引用特性 #

因为你传入的item是对象（引用类型），Mutation里修改它的属性后，Action里的原对象也会同步更新：

mutations: {
  insert(state, item) {
    const guid = Math.floor(Math.random() * 6) + 1;
    item.guid = guid; // 修改传入的对象属性
    state.data.push(item);
    // 不需要return
  },
},
actions: {
  insert ({ commit }, data) {
    return new Promise((resolve) => {
      // 把data包装成对象（如果本身不是的话）
      const item = { ...data };
      commit('insert', item);
      resolve(item.guid); // 这里就能拿到Mutation里设置的guid了
    });
  }
}

方式B：在state中临时存储guid #

可以在state里加一个临时字段，比如lastInsertedGuid，Mutation生成后赋值给它，Action再从state中读取：

state: {
  data: [],
  lastInsertedGuid: null // 新增临时字段
},
mutations: {
  insert(state, item) {
    const guid = Math.floor(Math.random() * 6) + 1;
    item.guid = guid;
    state.data.push(item);
    state.lastInsertedGuid = guid; // 存到state里
  },
},
actions: {
  insert ({ commit, state }, data) {
    return new Promise((resolve) => {
      commit('insert', data);
      resolve(state.lastInsertedGuid); // 从state获取
    });
  }
}

推荐优先用方案1，它更符合Vuex的单向数据流设计，逻辑分工更清晰。

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