方法 --> 动作 --> 变异 --> 状态问题

Posted

技术标签:

【中文标题】方法 --> 动作 --> 变异 --> 状态问题【英文标题】:Method --> Action --> Mutation --> State issue 【发布时间】:2016-11-18 18:13:41 【问题描述】:

我的函数应该使用自身的参数将 JSON 迭代地插入到特定级别的嵌套 JSON 的每个元素中,它复制了返回的第一个对象并将其插入到每个嵌套参数中。请参阅下面的屏幕截图和代码,了解我在做什么。

基本上我在状态中有一个嵌套的 JSON 对象,并且需要使用从 API 返回 JSON 的操作,然后是更新状态的突变,迭代地附加到现有对象的每个“行”的嵌套属性。

问题在于我认为的突变。我推断我的函数是复制从 API 返回的第一个 JSON 对象。请参阅下面的 Action 和 Mutation 函数,以及 JSON 的 API 函数和结构。

http://api.capecodcommission.org/docs/index.html#sumofannualcapitaltotalsfortreatment

使用 v-for 运行的特定组件中的函数:

methods: 
    costTotal () 
      return this.updateFinTotals(this.treatment.treatmentId,this.costType.treatTotal,this.costType.financeOption,this.treatment.relativeStartYear,this.costType.finDur,this.costType.prinFor)
    
  

运行函数,查看 JSON:

<td class="text-center">
     costTotal  
     costType.annualized.sumOfAnnualCapitalTotals 
</td>

V-for 循环:

<tbody>
    <tr v-for="(index, costType) in treatment.costTypes | filterBy 'true' in 'financeable'" is="cost-type-table-row-finance" :cost-type="costType"></tr> 
</tbody>

API函数:

getSumOfAnnualCapitalTotals (treatmentId, costToFinance, financeOption, relativeStartYear, financeDuration, principalForgivenessRate) 
    let data = 
      treatmentId: treatmentId,
      costToFinance: costToFinance,
      financeOption: financeOption,
      relativeStartYear: relativeStartYear,
      financeDuration: financeDuration,
      principalForgivenessRate: principalForgivenessRate
     

    return Vue.http.post(API_ROOT + 'sumOfAnnualCapitalTotalsForTreatment', data)
  

Action:从 API 中提取 JSON,调度突变函数。

export const updateFinTotals = function ( dispatch, state , treatmentId, costToFinance, financeOption, relativeStartYear, financeDuration, principalForgivenessRate) 

  api.getSumOfAnnualCapitalTotals( treatmentId, costToFinance, financeOption, relativeStartYear, financeDuration, principalForgivenessRate ).then(function (response) 

    dispatch('UPDATE_ANNUALIZED', response.data)

  , function (response) 

    console.log(response)
  )

变异:使用 JSON 更新状态。

UPDATE_ANNUALIZED (state, annualized) 
    for (var i = 0; i < state.scenario.treatments.length; i++) 
      for (var j = 0; j < state.scenario.treatments[i].costTypes.length; j++) 
        state.scenario.treatments[i].costTypes[j]["annualized"] = annualized
      
    
  

编辑:下图

组件:http://i.imgur.com/lcS5Fgo.jpg

JSON 结构:http://i.imgur.com/AsANZOp.jpg

【问题讨论】:

根据您提供的内容,很难推断出代码中的问题所在。您能否创建一个简单的示例,以便我们自己进行测试?此外,我仍然不完全清楚什么是不工作以及它应该如何工作。您能否更详细地解释一下问题本身? 嘿@nils,感谢您的回复。检查我在代码下方添加的屏幕截图。您将放大 JSON 图像,因为它是一个巨大的对象。我有一个返回 sumOfAnnualCapitalTotals: #### 的函数,其中 #### 是基于每个处理 [i].costTypes[j] 的 costType 参数的总和,我将返回的对象粘贴在每个处理中Treatment[i].costTypes[j].annualized,但它只是在所有 [i] 和 [j] 上复制第一次迭代 【参考方案1】:

好吧,您的 API 返回 one 值(对于 one 成本类型的 one 处理)

来自链接 API 文档的示例:

"sumOfAnnualCapitalTotals":150374.9849625

但是您将其分配给 all 成本类型的 all 治疗,并在突变中使用 for 循环:

for (var i = 0; i < state.scenario.treatments.length; i++) 
  for (var j = 0; j < state.scenario.treatments[i].costTypes.length; j++) 
    state.scenario.treatments[i].costTypes[j]["annualized"] = annualized
  

您应该做的是将treatmentID 和成本类型(我sherlock-holmed,称为costToFinance)从动作传递到突变,然后过滤匹配对象的状态,并仅更新那:

UPDATE_ANNUALIZED (state, treadmentId, costToFinance, annualized) 

  const treatment = state.treatments.find((t) => t.treatmentId === treatmentId)

  const currCostType = treatment.costTypes.find((costType) => costType.Id === costToFinance)

  currCostType.annualized = annualized

问题是您的 JSON 似乎没有任何 ID 用于 costTypes 到 find 它,但这需要您自己弄清楚。

【讨论】:

除了 response.data 从动作中分派更多信息的最佳方式是什么?我已经获得了treatmentId,并且可能将costType.name 用于突变.find(),但需要弄清楚如何将它们与response.data 一起从动作传递到突变。

以上是关于方法 --> 动作 --> 变异 --> 状态问题的主要内容,如果未能解决你的问题,请参考以下文章

Vue 变异方法Push的留言板实例

24.VUE学习之-变异方法filter与regexp实现评论搜索功能

使用 PHP 脚本发送电子邮件 -> 如何显示变异元音?

让shell脚本实现单例运行的方法--富人靠科技穷人靠变异张伟靠过敏

集合 <__NSCFString:> 在被枚举崩溃时发生了变异

崩溃 - “集合 <CALayerArray: 0x645dfc0> 在枚举时发生了变异。”