vuex突变的返回值？（新创建对象的 ID）答案

【问题标题】：Return value from vuex mutation? (id for newly created object)vuex突变的返回值？（新创建对象的 ID）
【发布时间】：2017-07-13 07:05:25
【问题描述】：

我正在尝试在 vuex 存储的一部分中创建一个对象，然后将 id 传递给另一个对象，我不确定如何正确执行此操作，因为突变无法返回返回任何内容（在此案例，id)。

两个 store 对象如下所示：

// store/report.js
const state = {
    name: 'Untitled Report',
    subReportIds: []
};

// store/subReport.js
const state = { ... }

我希望此操作先创建空白报表，然后创建空白子报表，然后将子报表 ID 分配给新创建的报表。（子报表是独立的实体，可以被多个报表使用，因此存储区域不同）

const actions = {
    createNewReport({ state, commit }) {
        commit(mutationTypes.CREATE_NEW_REPORT)
        // below doesn't work - i can't get return from mutation
        let newSubreportId = commit(mutationTypes.ADD_NEW_SUBREPORT)
        // if this worked, i'd then do something like
        commit(mutationTypes.ADD_SUBREPORT_TO_REPORT, newSubreportId)
    }
};

我怎样才能实现上述目标？

【问题讨论】：

标签： vue.js vuejs2 vuex

【解决方案1】：

所以对我来说最好的方法是调度动作而不是提交突变。如果您查看 Vuex 源代码中的方法，commit 仅执行没有返回（因此是 void），dispatch 返回您从操作返回的值（这是一个函数）

对于我的行为，我总是返回一个承诺，这样我就可以像你上面提到的那样编写它们。这是一个例子。

fetchSomething ({ commit }) {
  return mockApiGetIds()
    .then(response => {
      commit({
        type: SOME_MUTATION,
        ids: response
      });
    
      return response;
    });
  },

【讨论】：

最惯用的解决方案。

【解决方案2】：

免责声明：我不知道这是否真的是一个好主意，但至少，它似乎有效，而且对我来说，它感觉比必须使用操作和承诺或生成 id 更漂亮在行动中...

通过你的变异，你可以传递一个参数。要从突变中返回一个值（例如新创建的 id），我将其写入该参数中的占位符：

someMutation(state, arg){
   //...
   arg.out = {
      status : "succeed"
   }
}

//...

this.$store.commit('someMutation', arg);
if(arg.out !== "succeed") console.log("ERROR");

【讨论】：

虽然这确实有效，但依靠改变参数来表示结果会增加复杂性，我认为其他用户不会对此感到惊讶。
...这正是免责声明的原因。但是对于习惯于将指针传递给要变异的对象的 C 程序员来说，这感觉很自然。不过，我主要担心的是该对象在未来版本中的可能副本（即使不太可能发生，依赖未记录的行为总是需要您自担风险）。关于复杂性，我认为编写一个动作并异步处理突变结果对我来说感觉要复杂得多。而且它需要 2 倍以上的代码行...
也许传递一个设置值的回调而不是传递一个普通的对象会使这个解决方案更具可读性。但我个人不会使用这种模式，因为在它出现在代码中之后，越来越多的人意识到它可以解决他们的一些问题。因此，他们开始使用它来解决可以通过更直接的工具解决的问题（即使他们需要更多的行/字符），当他们意识到它被过度使用时，他们的商店里就有了一个很好的意大利面球。
不要误会，这是对问题的有效答案，只是添加了我的意见，因为我认为它可能有用。
我喜欢回调的想法 :) 但是，我会警告“初学者”它可能会产生意想不到的副作用：假设回调传递设置了一个反应性属性：那么你可能会得到一个嵌套的突变和一些混乱逻辑。占位符解决方案使其不太可能。这是可读性和简单性之间的平衡。但我完全理解您的观点，并且我认为占位符解决方案应该仅在这种简单返回值的情况下使用（如错误检查或返回生成的 id，如前示例）

【解决方案3】：

如果它只是通过从突变中返回来工作，那就太好了......

请为跟踪它的问题投票： https://github.com/vuejs/vuex/issues/1437

这可能允许将来有类似的东西：

let myReturn = this.$store.commit('ADD_THING",{"name":"new_thing"});
// 'ADD_THING' adds a thing to an numerically indexed object and then returns the number.
console.log(myReturn); // {"id":42,"datestamp":1541145883085}

【讨论】：