Совместное использование состояния между компонентами Vue.js, которые обновляются в mousemove

Question

В приложении Vue.js у меня есть два родственных компонента: вид карты и строка состояния.Строка состояния показывает, помимо прочего, текущие географические координаты указателя мыши.

В настоящее время у меня есть обработчик события mousemove в компоненте MapView, который вычисляет географические координаты указателя и фиксируетих в магазине приложения Vuex.Компонент StatusBar отображает значения из хранилища Vuex.

Проблемы носят двоякий характер.

1. Я не уверен, имеет ли право принимать в хранилище Vuexmousemove.Событие mousemove может запускаться до 60–100 раз в секунду.Среди других проблем это приводит к зависанию плагина Vue devtools.

2. Вычисление географических координат не совсем тривиально.Было бы лучше, если бы это было сделано только при рендеринге StatusBar, а не при каждом запуске обработчика событий mousemove.Но чтобы сделать это, мне нужно было бы иметь доступ к методам компонента MapView из компонента StatusBar, что я не считаю возможным (или, по крайней мере, идиоматическим) в Vue.

Я вижу несколько других вариантов, но я не уверен в их достоинствах:

• Я мог бы использовать глобальную шину событий, и *Обработчик события 1030 * в компоненте MapView может вызвать событие, которое содержит ссылку на MapView в качестве аргумента.Тогда компонент StatusBar будет иметь доступ к MapView, чтобы вызывать его методы для вычисления географических координат.Это позволило бы избежать чрезвычайно частых коммитов в магазин Vuex, но я не знаю, будет ли это действительно более эффективнымКроме того, я все равно буду эффективно выполнять географические вычисления на mousemove, а не на рендере.

• Возможно, я мог бы сохранить ссылку на MapView как свойство $root и, таким образом, сможете напрямую обращаться к его методам из компонента StatusBar.Это кажется грязным, и я уверен, что в Vue это не идиоматическая вещь.

Оба приведенных выше метода также приводят к жестким связям между StatusBar и MapViewкомпоненты, что не идеально.

• Третий вариант - просто ограничить мой обработчик mousemove, чтобы он работал реже.Но для того, чтобы строка состояния обновлялась плавно, ей все равно придется запускаться 10 раз в секунду или около того, и я все еще не уверен, является ли Vuex подходящим местом для данных, которые часто меняются.

Чтобудет идиоматическим (и наиболее эффективным) способ справиться с этим в Vue?И является ли хранилище Vuex подходящим местом для данных, которые так часто меняются?

Answer 1

Похоже, вам просто нужно уменьшить количество вызовов коммитов.Попробуйте использовать debounce или throttle в обратном вызове mousemove, чтобы достичь этого, перед рефакторингом больших частей вашего кода.
Что делает _.debounce? - хорошее объяснение для debounce.

import {debounce} from 'lodash' 
{
 template :  '<div @mousemove="update"></div>',
 methods :{
   update:  debounce(function(event){
      this.$store.dispatch('updateInput',event)
    }, 2000)
  }
}