Vue.js 基于异步子级收集数据的VueJS列表排序

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

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

基本上，组件树是：

• 页面
  • 结果项（多个）
    • x分数
    • y分数
    • z分数

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

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

• 结果项v-for列表可通过页面组件上用户控制的下拉菜单（例如，按x/y/z排序下拉菜单和asc/desc下拉菜单）根据“x分数”、“y分数”、“z分数”异步计算值重新排序
• 当分数值以异步方式出现时，结果列表会重新排序（即，反应性预先）

我一直在研究Vuex，它似乎是最好的方法，但在我深入研究之前，我想验证一下我的想法，以及人们是否认为它确实有效

我应该：

• 使用Vuex存储保存我的结果列表
• 使用变体存储初始结果列表（具有id/url的对象列表）
• 在页面组件中使用计算属性，如“orderedResults”，并使用该属性中的v-for呈现“结果项”组件
• 使用每个评分组件上的突变，将分数添加到存储中的每个结果项中（使用

  set

  方法确保对新道具的反应性）。这是否意味着我需要传递结果项的id和新分数，然后按id在结果项中查找并修改它，或者我可以传递通过道具给出的结果项的引用，直接在变异函数中使用它

---

这是最好的方法吗？有什么问题吗？谢谢

这都是你建议的。但是要将分数添加到每个结果项中，您应该在结果项中使用数组，而不是使用

set

。在我看来，使用

.push

是确保反应性和清晰性的最佳方法

---

通过参照比较对象即使在vuex中也有效。我在这里测试过了

谢谢。通过数组，你的意思是我应该有一个像：

[{scoreA:10}，{scoreB:20}，{scoreC:83}]

这样的数组，这使得以后按键显示这些结果变得非常困难；item.key=0；item.order=0；推送（物品）yourArray中，并在分数输入时用加载器显示在屏幕上。我在这里做了一个真正“令人讨厌”的演示：似乎有效，但前提是数组中的对象以.scoreA/B/C属性开始，以允许Vue监视它们。将尝试将此应用于我的真实应用程序。