How to manage data in Vue.js?

Question

JavaScript

I'm making a small application using Vue.js.
Through the API, a large portion of data (an array of objects) is loaded at a time, with which further manipulations take place without requests to the server. At the mounted stage, I call axios and write all the received data to this.store, I give an example of a data element:

this.store[0] = { id : 1,
type : 2,
city: 10,
description: 'text' }

You need to output several selects to the template for filtering, containing data, a selection of parameters for the received objects, for example, type and city.
Get computed properties? But they need to be calculated after the data is ready (the request is long, several seconds). Or fill in acc. properties with possible types immediately after the data is loaded (during the mounted stage)?
The data itself - to get a copy of the data and output it to the template by running it through the filter method?

There are a lot of questions about the architecture of such applications, maybe there are some useful styleguide on SPA, which describes the recommended practices on basic issues?

Answer 1

But they need to be calculated after the data is ready.

And what's the problem? They will recalculate themselves when the data appears. What's the question? Set v-if="NOT_LOADED" , after loading change the flag NOT_LOADED to LOADED .

Answer 2

But they need to be calculated after the data is ready (the request is long, several seconds)

If this is done through computed, then it will be recalculated itself (because it is used in the template) as soon as something that computed depends on changes