VueJS list ordering based on async child-gathered data

Question

I have an interesting situation as follows. I have:

• a parent component that does a web service call for a list of results (websites)
• it then renders a "result item" component (v-for) for each result
• then each "result item" component fires off a number of web service calls to get scores for that url and display them beside it.

Basically the component tree is:

• page
  • result item (many)
    • x score
    • y score
    • z score

Up until now I've been able to pass down the tree using props just the web url of the result item to the scoring components and keep the score service call and data local to each score component. This nicely separates all the logic.

Nonetheless, what I'd like to achieve now is:

• Result items v-for list re-orderable based on the "x score", "y score", "z score" async calculated values via user-controlled dropdowns on the page component (e.g. order by x/y/z dropdown and asc/desc dropdown).
• Results list re-order as the score values come in async-ly (i.e. reactive upfront)

I've been looking at Vuex, and it seems like it may be the best approach but before I dive all the way in I'd like to verify my thoughts and if people think it'd actually work.

Should I:

• Use a Vuex store to hold my list of results
• Use a mutation to store the initial results list (list of objects with id/url)
• Use a computed property in the page component like "orderedResults" and render the "result item" components with v-for from that
• Use mutations on each scoring component to add the scores to each result item in the store (prob with set method to ensure reactivity on new prop). And does this mean I need to pass an id of the result item and the new score then do a lookup in the result items by id to find and modify it, or can I pass through in the mutation payload the ref I have of the result item given down via props and just use that in the mutation function directly?

Is this the best way to do it? Any gotchas? Thanks!

Answer 1

It's all as you suggested. But to add the scores to each result item you should use an array in the result item instead of using set. In my opinion using .push is the best way to ensure reactivity and clearity.

Comparing objects by refs works even when they are in vuex. I tested it here https://jsfiddle.net/posva/6w3ks04x/