代码之家 › 专栏 › 技术社区 › Caesar

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

vuex vue.js

Caesar · 技术社区 · 7 年前

在一个Vue.js应用程序中,我有两个兄弟组件:地图视图和状态栏。状态栏显示鼠标指针的当前地理坐标。

mousemove 中的事件处理程序 MapView 组件,它计算指针的地理坐标并将其提交到应用程序的Vuex应用商店。这个 StatusBar 组件显示Vuex存储区中的值。

问题有两方面。

移动鼠标 . 这个事件每秒最多可以触发60100次。除其他问题外,这会导致Vue devtools插件冻结。
地理坐标的计算并不简单。如果只在渲染 状态栏 ,而不是每次事件处理程序运行。但要做到这一点,我需要能够访问组件来自 状态栏

我可以看到其他一些选择,但我不确定它们的优点:

我可以用全球事件总线 移动鼠标 地图视图 组件可以触发包含对作为论据。然后组件可以访问称之为计算地理坐标的方法。这样可以避免对Vuex商店的频繁提交,但我不知道它是否真的更有效。此外,我仍然会有效地进行地理计算 移动鼠标
也许我可以存储一个 地图视图 $root ,因此可以直接从 状态栏 组件。这感觉很笨拙,我相信这不是一个惯用的事情,在武大。

上述两种方法还将导致和 地图视图 组件,这不太理想。

第三个选择是简单地限制我的 移动鼠标

在Vue中,处理此问题的惯用(也是最有效的)方法是什么?Vuex存储区是否适合频繁更改的数据?

1 回复 | 直到 7 年前

elad frizi 7 年前

似乎您只需要减少提交调用的数量。在重构大部分代码之前,尝试在mousemove回调中使用debounce或throttle来实现这一点。
What does _.debounce do?

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

推荐文章

matthew · 如何检索存储状态的新旧值

8 年前

dendog · 如何在Vuex状态创建中使用函数

8 年前

Thuan Nguyen · 使用vuex更新数据

8 年前

MaratSR · 在vuex中创建操作的正确方法

8 年前

dendog · 动态填充Vuex状态

8 年前

Andriy Stolyar · 如何在Vuex存储区已经创建之后手动将其添加到Vuex存储区?

8 年前

Cameron · 数据显示在websocket响应中,但未显示在已解决的promise中

8 年前

cmasri · vue test utils:如何在mounted()生命周期挂钩中测试逻辑(使用vuex)?

8 年前

EmacsVI · Vue good表格在填充后不会显示“emptystate”

8 年前

pirmax · VueJS-VueX和flash消息

8 年前