Vue.js + Vuex中的DRY

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的設計方式，我無法將其中的兩個合並為一個突變，然后再合並為兩個，這是非常有限的。

我本可以添加第3個參數（例如位置），然后執行類似的操作

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 模塊 ，也許mixin可以更好地重復使用代碼，如果不對應用程序的結構有更詳細的了解，很難說。

盡管DRY之類的原理非常適合指導您的開發，但請記住，應用程序的邏輯結構，易於維護和對您有意義同樣重要，然后，當您的代碼不完美時，您可以節省一點時間。