Как организовать фильтр по огромному массиву данных?

Question

[danilr]

В общем я получаю массив данных из 3000 записей и сразу записываю его во vuex.
Имеется в интерфейсе пользователя - много разных фильтраций по разным параметрам.

Прошу подсказки как это все организовать?
К примеру, мне делать копию массива при получении и с ним выполнять изменения или использовать getters?

Если я буду перезаписывать после после фильтрации массив, то если пользователь отменит фильтр, как мне обратно получить и т.п.

Не было еще опыта, где много возможных параметров фильтрации имеется, обычно только один был.
Понимаю, вопрос достаточно абстрактный, но если кого не затруднит по опыту описать как это делается, буду крайне благодарен.

Comments

[sim3x]

я получаю большой массив данных и сразу записываю его во vuex.

зачем получаете?
Что такое "большой"?
Зачем записываете?

[danilr]

sim3x, для вывода информации получаю, большой - массив объектов длинной около 300. Записываю в state vuex чтобы удобно было использовать в разных компонентах.

[Roman K]

danilr, 300? Может, 300 тысяч?

[danilr]

Roman Kitaev, ой 3000

[Roman K]

danilr, 3000 это тоже не очень данные. Скорее всего обычные методы будут достаточно быстрыми

Answer 1

[ned4ded]

Добрый день!

В общих чертах: фильтруемые данные должны быть иммутабельны (что немного против философии vue). Следовательно, вы в модуле, через который делаете апи колл на получение данных, пишите геттеры на разные "срезы" этого массива.

Ps
Возможно, вам стоит сразу после получения ответа нормализовать данные: разбить на flatten массивы, преобразовать массивы в объект с ключами - айдишниками; иначе если у вас тяжеловесный массив на 10к+ ("огромность" такого массива может не сильно влиять на производительность, все зависит от многих факторов, но у меня такие просадки появились в тот момент, когда я начал обрабатывать порядка 50к плоских объектов) объектов с огромным количеством полей, то все это может начать тормозить, особенно если у вас частые обновления дома, связанные с этим массивом.

+ помните, что после добавления в стор все объекты оборачиваются в специальные vue-конструкции, которые позволяют сделать данные реактивными, в связи с чем может быть сильная просадка производительности при загрузки в стор без асинхронных чанков.

Возможно, вам пригодится https://github.com/vuex-orm/vuex-orm, особенно если массив имеет несколько повторяющихся сущностней.

ps2 300 объектов - это не огромный массив ;) вам вполне подойдет все, что описано "в общих чертах", оптимизация вряд ли понадобится.

Comments

[danilr]

Опечатался, 3000 где то)
В общих чертах понял примерно, спасибо большое!
А надо использовать один getters для всех фильтраций? Если новый getters для каждого фильтра, то я не понимаю как потом это объединять и вставлять в шаблон.
<div>{{data.title}}</div>
И вот при каждом выборе фильтра пробегаться по изначальному массиву данных?