Почему не рекомендуется делать огромное число коммитов за короткий промежуток времени?

Question

[andrei_pro]

Делаю компонент перетаскивания. При событии mouseMove делаю коммиты $store.commit('drag') - их сотни за секунду может быть.
Сразу в vuex, потому что многие компоненты должны сразу менять состояние от координат.

При таком подходе чуть падает fps и рекомендуют так не делать и хранить координаты в локальных переменных.

Собственно почему vuex не подходит для огромного числа коммитов?

Answer 1

[Aetae]

Потому что это хранилище. Там надо хранить.
Это не шина обмена данными.
Если вы делаете компонентомешалку, используйте например provide и inject для общей в рамках родительского компонента системы.

Comments

[andrei_pro]

Vue.observable() или Vue.prototype.$global подойдут?

[Aetae]

Смотря как это использовать. Если нормально - пойдёт, только будет нифига не гибко, не реюзабельно и не аккуратно.
Как по мне provide - как раз для вашего случая.

Answer 2

[Alex]

Собственно почему vuex не подходит для огромного числа коммитов?

Потому что при каждом комите Vue проходится по всем зависимостям, пересчитывает их, пересчитывает состояния всех компонентов, изменяет DOM где это нужно. А это всё блокирующие операции.

Лучше используйте EventBus : транслируйте разыне события, не просто "drag" но и "dragstart" и "dragend". Передавайте с событиями нужные координаты. И создавайте компоненты-подписчики на нужные события.

Отдельно можете добавить тротлинг. Не большой, буквально до 100 миллисекунд. Уже это существенно уменьшит количество комитов, а интерфейс останется таким же "мгновенным"

Comments

[Stalker_RED]

В этих событиях уже есть координаты.
Хотя они особо и не нужны, подсвечивать и так можно

Answer 3

[Stalker_RED]

Потому что будет лагать.

Попробуйте обрабатывать только dragstart/dragend (добавьте еще dragover/
dragleave, если они нужны), а от mousemove или drag отказаться вообще.
https://developer.mozilla.org/ru/docs/Web/Guide/HT...

Comments

[andrei_pro]

Собственно это и вопрос почему он лагает. И описано же что не подходит только end обрабатывать.
Возможно проще сделать форк и что-то удалить.

Answer 4

[Robur]

Что вы хотите, если вы сотни раз в секунду обновляете реактивный стор на который подписаны "многие компоненты" которые тоже должны обновиться на каждый из этих сотен раз и перерисовать себя заново.

Задайте себе вопрос - зачем вам менять это сотню раз в секунду? большая часть из этого даже на экран не успеет вывестись, а скорее всего и в дом.

поставьте на свой обработчик throttle и не дергайте стор чаще чем 20-30 раз в секунду.