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

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

我的规则(这将被争论…(是尽可能始终使用异步CALLS(带有async/await(，即使我正在调用同步方法。如果sync方法变成async，那么我的代码就是经得起未来考验的。在您提到的情况下，它还允许Vuex返回值和/或错误。

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

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

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