Vuex突变和行动责任

Question

除了突变必须是同步的，而动作可以包含异步代码之外，我发现很难建立一些关于如何正确选择逻辑应该在哪里实现的指导方针。

Vuex文档将突变描述为事务，这让我认为每个突变必须确保尽可能多的状态一致性，在同一突变中潜在地在存储中进行多个更改。

让我们以下面的状态为例，存储既可以加载也可以加载的文档：

const state = {
  loading: []
  loaded: []
}

const mutations = {
  setLoaded(state, doc) {
    state.loaded.push(doc)
    // Remove doc from loading:
    const index = state.loading.find(loadingDoc => doc.id === loadingDoc.id)
    if (index !== -1) {
      state.loading.splice(index, 1)
    }
  }
}

这里的变化确保文档处于正在加载或已加载的状态，而不是两者都处于。这样做的问题是，突变最终可能会有很多逻辑，这可能会使它们更难通过Vuex开发工具进行调试。

一些人倾向于尽可能简单地保持突变(例如，每个突变只有一个状态更改)，但接下来要由操作(或组件直接调用突变)来确保状态一致性，这可能更容易出错，因为在上面的示例中，每次调用“setLoaded”突变时都需要从加载状态中删除文档。

至于数据验证，不幸的是，我们没有简单的方法在突变中做到这一点，因为突变不能返回任何东西。因此，调用突变的操作无法知道数据是无效的。例如：

const mutations = {
  setValue(state, intValue) {
    if (intValue < 0) {
      // error
      return
    }
    state.value = intValue;
  }
}

因此，数据验证似乎需要在操作中完成，突变假设他们收到的数据是正确的。

你对此有什么想法，更广泛地说，关于动作和突变？你有从自己的经验中正确使用它们的指导方针吗？

Answer 1

如果数据验证包含多个突变和/或需要在操作失败时向调用者发出信号，则必须在操作中完成数据验证。

我的规则(这一点将会被争论...)就是始终使用异步调用(使用async/await)，即使我在调用sync方法。如果sync方法变成异步方法，那么我的代码就是未来的证明。在您提到的情况下，它还允许来自Vuex的返回值和/或错误。

let response
response = await anAsyncMethod()
response = await aSyncMethod()
response = await aVuexMutateOp()
response = await aVueActionOp()

是的，这会增加一些处理开销，但使用async/await语法也同样清楚。它还简化了错误处理，将其路由到catch块。

因为突变有一个限制，即它们必须是同步的，不能调用其他突变，并且不返回值，这表明应该只在最简单的情况下使用突变。