基于异步子聚集数据的{VueJS列表排序

Question

我有一个有趣的情况如下。我有：

• 为结果列表（网站）执行Web服务调用的父组件
• 然后为每个结果呈现“结果项”组件（v-for）
• 然后每个“结果项”组件触发一些Web服务调用以获取该URL的分数并将其显示在旁边。

组件树基本上是：

• 页
  • 结果项目（很多）
    • x得分
    • y得分
    • z得分

到目前为止，我已经能够使用props将结果项的web url传递给评分组件，并将得分服务调用和数据保持在每个得分组件的本地。这很好地区分了所有的逻辑。

尽管如此，我现在要做的是：

• 结果项v-for list可根据页面组件上的用户控制下拉列表，根据“x得分”，“y得分”，“z得分”异步计算值重新订购（例如，按x / y / z排序）下拉列表和asc / desc下拉列表。）
• 结果列表重新排序，因为得分值异步进入（即反应性前期）

我一直在关注Vuex，看起来它可能是最好的方法，但在我一直潜入之前我想验证我的想法以及人们是否认为它确实有效。

我应该：

• 使用Vuex商店保存我的结果列表
• 使用变异来存储初始结果列表（具有id / url的对象列表）
• 在页面组件中使用计算属性，如“orderedResults”，并使用v-for渲染“结果项”组件
• 在每个评分组件上使用突变，将分数添加到商店中的每个结果项目（概率为set方法，以确保对新支柱的反应性）。这是否意味着我需要传递结果项的id和新得分然后通过id在结果项中查找以查找和修改它，或者我可以在突变有效负载中通过我对结果的ref通过道具给出的项目，直接在变异函数中使用它？

这是最好的方法吗？任何陷阱？谢谢！

Answer 1

一切如你所说。但是要将分数添加到每个结果项，您应该在结果项中使用数组而不是使用set。在我看来，使用.push是确保反应性和清晰度的最佳方法。

通过refs比较对象，即使它们处于vuex中也能正常工作。我在这里测试了https://jsfiddle.net/posva/6w3ks04x/