Question

在Vue.js应用程序中，我有两个同级组件：地图视图和状态栏。状态栏除其他外显示鼠标指针的当前地理坐标。

当前，我在mousemove组件中有一个MapView事件处理程序，该事件处理程序计算指针的地理坐标并将其提交到应用程序的Vuex存储中。 StatusBar组件显示Vuex存储中的值。

问题是双重的。

我不确定是否要提交到mousemove上的Vuex存储。 mousemove事件每秒最多可触发60–100次。除其他问题外，这还会导致Vue devtools插件冻结。
地理坐标的计算并非完全无关紧要。如果只在呈现StatusBar时而不是每次mousemove事件处理程序运行时才这样做，那会更好。但是要做到这一点，我将需要能够从MapView组件访问StatusBar组件的方法，我认为这在Vue中是不可能的（或至少是惯用的）。

我可以看到其他两个选项，但是我不确定它们的优点：

我可以使用全局事件总线，并且mousemove组件中的MapView事件处理程序可以触发一个事件，该事件包括对MapView的引用作为参数。然后StatusBar组件可以访问MapView来调用其计算地理坐标的方法。这样可以避免对Vuex商店的频繁提交，但是我不知道它是否真的会更有效。此外，我仍然可以在mousemove上而不是在渲染上有效地进行地理计算。
也许我可以将对MapView的引用存储为$root的属性，从而能够从StatusBar组件直接访问其方法。这感觉很笨拙，我相信这不是在Vue中要做的惯用语。

以上两种方法都将导致StatusBar和MapView组件之间的紧密绑定，这不理想。

第三种选择是简单地限制我的mousemove处理程序以使其运行频率降低。但是要使状态栏平滑更新，它仍然必须每秒运行10次左右，而且我仍然不确定Vuex是否是经常更改数据的正确位置。

在Vue中处理此问题的惯用方式（也是表现最佳的方式）是什么？ Vuex是否在正确位置存储频繁变化的数据？

Answer 1

似乎您只需要减少提交调用的数量。在重构大部分代码之前，请尝试在mousemove回调中使用去抖或调节来实现此目的。
What does _.debounce do?-有关反跳的很好解释。

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

在Vue.js组件之间共享状态，该状态在mousemove上更新

1 个答案: