基于异步子收集数据的 VueJS 列表排序
VueJS list ordering based on async child-gathered data
我有一个有趣的情况如下。我有：
- 为结果列表（网站）执行 Web 服务调用的父组件
- 然后它为每个结果呈现一个 "result item" 组件 (v-for)
- 然后每个 "result item" 组件触发大量 Web 服务调用以获取该 url 的分数并将其显示在它旁边。
基本上组件树是：
- 页
- 结果项（多）
- x 分数
- y 得分
- z 得分
到目前为止，我已经能够使用 props 仅将结果项的 Web url 传递给评分组件，并将评分服务调用和数据保留在每个评分组件的本地。这很好地分离了所有逻辑。
尽管如此，我现在想要实现的是：
- 结果项 v-for 列表可根据 "x score"、"y score"、"z score" 异步计算值通过页面组件上的用户控制下拉列表重新排序（例如排序依据x/y/z 下拉菜单和 asc/desc 下拉菜单）。
- 结果列表重新排序，因为得分值是异步的（即反应性的前期）
我一直在研究 Vuex，这似乎是最好的方法，但在我深入研究之前，我想验证一下我的想法，看看人们是否认为它真的有效。
我应该：
- 使用 Vuex 存储来保存我的结果列表
- 使用突变来存储初始结果列表（id/url的对象列表）
- 在 "orderedResults" 之类的页面组件中使用计算的 属性 并从那个
使用 v-for 渲染 "result item" 组件
- 在每个评分组件上使用突变将分数添加到商店中的每个结果项目（使用
set 方法的概率以确保对新道具的反应性）。这是否意味着我需要传递结果项的 id 和新分数，然后通过 id 在结果项中进行查找以查找和修改它，或者我可以在突变有效负载中传递结果的 ref通过道具给出的项目并直接在突变函数中使用它？
这是最好的方法吗？有什么问题吗？谢谢！
一切都按照您的建议进行。但是要将分数添加到每个结果项中，您应该在结果项中使用数组而不是使用 set。在我看来，使用 .push 是确保反应性和清晰度的最佳方式。
即使在 vuex 中，也可以通过 refs 比较对象。我在这里测试过 https://jsfiddle.net/posva/6w3ks04x/
我有一个有趣的情况如下。我有：
- 为结果列表（网站）执行 Web 服务调用的父组件
- 然后它为每个结果呈现一个 "result item" 组件 (v-for)
- 然后每个 "result item" 组件触发大量 Web 服务调用以获取该 url 的分数并将其显示在它旁边。
基本上组件树是：
- 页
- 结果项（多）
- x 分数
- y 得分
- z 得分
- 结果项（多）
到目前为止，我已经能够使用 props 仅将结果项的 Web url 传递给评分组件，并将评分服务调用和数据保留在每个评分组件的本地。这很好地分离了所有逻辑。
尽管如此，我现在想要实现的是：
- 结果项 v-for 列表可根据 "x score"、"y score"、"z score" 异步计算值通过页面组件上的用户控制下拉列表重新排序（例如排序依据x/y/z 下拉菜单和 asc/desc 下拉菜单）。
- 结果列表重新排序，因为得分值是异步的（即反应性的前期）
我一直在研究 Vuex，这似乎是最好的方法，但在我深入研究之前，我想验证一下我的想法，看看人们是否认为它真的有效。
我应该：
- 使用 Vuex 存储来保存我的结果列表
- 使用突变来存储初始结果列表（id/url的对象列表）
- 在 "orderedResults" 之类的页面组件中使用计算的 属性 并从那个 使用 v-for 渲染 "result item" 组件
- 在每个评分组件上使用突变将分数添加到商店中的每个结果项目（使用
set方法的概率以确保对新道具的反应性）。这是否意味着我需要传递结果项的 id 和新分数，然后通过 id 在结果项中进行查找以查找和修改它，或者我可以在突变有效负载中传递结果的 ref通过道具给出的项目并直接在突变函数中使用它？
这是最好的方法吗？有什么问题吗？谢谢！
一切都按照您的建议进行。但是要将分数添加到每个结果项中，您应该在结果项中使用数组而不是使用 set。在我看来，使用 .push 是确保反应性和清晰度的最佳方式。
即使在 vuex 中，也可以通过 refs 比较对象。我在这里测试过 https://jsfiddle.net/posva/6w3ks04x/