How to organize a filter on a huge array of data?

Question

Vue.js

In general, I get an array of data from 3000 entries and immediately write it to vuex.
Available in the user interface - many different filtering by different parameters.
Please advise how to organize this?
For example, should I make a copy of the array when I get it and perform changes with it, or use getters?
If I overwrite the array after filtering, then if the user cancels the filter, how can I get it back, etc.
There was no experience yet where there are many possible filtering options, usually there was only one.
I understand that the question is rather abstract, but if it does not make it difficult for anyone to describe from experience how this is done, I will be extremely grateful.

Answer 1

Good afternoon!
In general terms: the data being filtered should be immutable (which is a bit against the philosophy of vue). Therefore, you are in the module through which you make an api call to get data, write getters on different "slices" of this array.
Ps
Perhaps you should normalize the data immediately after receiving the answer: split into flatten arrays, convert the arrays into an object with keys - IDs; otherwise, if you have a heavy array of 10k+ (the "enormity" of such an array may not greatly affect performance, it all depends on many factors, but I had such drawdowns at the moment when I started processing about 50k flat objects) objects with a huge the number of fields, then all this can start to slow down, especially if you have frequent updates at home,
+ remember that after being added to the store, all objects are wrapped in special vue-constructs that allow you to make the data reactive, and therefore there may be a strong performance drawdown when loading into the store without asynchronous chunks. You may find https://github.com/vuex-orm/vuex-orm
useful , especially if the array has multiple duplicate entities. ps2 300 objects is not a huge array ;) everything that is described "in general terms" is quite suitable for you, optimization is hardly needed.