Vue.js + Vuex 中的 DRY答案

【问题标题】：DRY in Vue.js + VuexVue.js + Vuex 中的 DRY
【发布时间】：2018-03-29 08:26:48
【问题描述】：

在处理 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 的任何好处。

【问题讨论】：

标签： javascript ecmascript-6 vue.js vuex

【解决方案1】：

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

【讨论】：

【解决方案2】：

真正的问题是该逻辑是否属于一个增变器方法，或者是否应该将其重新分解为单独的方法。对我来说，一个名为setMaterialItem 的mutator 应该改变一个名为materialItem 的属性的状态，但它实际上看起来像是在一个名为order_material 的对象上做了一堆其他的事情，你如何抵消这取决于你到底是什么尝试这样做，也许您需要使用 action 或者可能将您的商店更改为 modules，也许 mixin 将允许更好的代码重用，如果没有更详细地了解您的应用程序如何使用，很难说是结构化的。

虽然 DRY 等原则非常适合指导您的开发，但请记住，您的应用具有逻辑结构、易于维护且对您有意义，这同样重要，然后您可以在您的代码不适合的情况下放松自己完美。

【讨论】：