DRY in Vue.js + Vuex

Question

在处理 Vue 时，你以哪种方式处理代码中的重复.js + Vuex。我有两个彼此非常相似的突变。

第一个是服务：

function setServiceItem(state, {model, value}) {
  const service = state.order_services
  service[model] = value
  if (model === 'service') {
    service.unit_price = value.price
  }
  updatePrice(service)
}

第二个是材料：

function setMaterialItem(state, {model, value}) {
  const material = state.order_material
  material[model] = value
  if (model === 'material') {
    material.unit_price = value.price
  }
  updatePrice(material)
}

这两者都非常相似，但由于 Vuex 的设计方式，我将其中两个合并为一个突变而不是两个的方式非常有限。

我本可以添加第三个参数，例如位置并做类似的事情

function setMisc(state, {model, value, location, eventForPriceAssignment}) {
  const item = state[loc]
  item[model] = value
  if (model === eventForPriceAssignment) {
    item.unit_price = value.price
  }
  updatePrice(material)
}

但这也会使函数更加复杂，并且需要我在每次提交时传递更多参数，这将完全消除 DRY 的任何好处。

Answer 1

我的观点（基于意见）是，更冗长的方式是正确的方式。当你使用 vue dev 工具时，按名称查看突变有助于调试。但是，在我更新具有许多参数的对象的情况下，我使用了后者。

Answer 2

真正的问题是该逻辑是否属于一个突变器方法，或者是否应该将其重构为单独的方法。对我来说，一个名为 setMaterialItem 的突变器应该改变名为 materialItem 的属性的状态，但实际上看起来它对名为 order_material 的对象做了一堆其他事情，你如何抵消这取决于你试图做什么，也许你需要使用一个动作，或者可能将你的存储分解为模块， 也许mixin可以更好地重用代码，如果没有更详细地了解应用程序的结构，很难说。

虽然像 DRY 这样的原则非常适合指导你的开发，但请记住，你的应用程序是逻辑结构的、易于维护的并且对你有意义同样重要，然后当你的代码不完美时，你可以减少一点懈怠。