마우스 이동 시 업데이트되는 Vue.js 구성 요소 간의 상태 공유

마우스 이동 시 업데이트되는 Vue.js 구성 요소 간의 상태 공유

Vue.js 앱에는 지도 보기와 상태 표시줄이라는 두 가지 형제 구성 요소가 있습니다.상태 표시줄에는 마우스 포인터의 현재 지리적 좌표가 표시됩니다.

현재 저는mousemove의 이벤트 처리기MapView구성 요소 - 포인터의 지리적 좌표를 계산하여 앱의 Vuex 저장소에 커밋합니다.그StatusBarcomponent는 Vuex 저장소의 값을 표시합니다.

문제는 두 가지입니다.

1. 다음 날짜에 Vuex 스토어에 커밋하는 것이 옳은지 확신할 수 없습니다.mousemove.그mousemove이벤트는 초당 최대 60-100회까지 발생할 수 있습니다.다른 문제 중에서도 이로 인해 Vue devtools 플러그인이 중지됩니다.

2. 지리적 좌표의 계산은 완전히 사소한 것이 아닙니다.렌더링할 때만 수행하면 더 좋을 것입니다.StatusBar매번 보다는mousemove이벤트 핸들러가 실행됩니다.하지만 그러기 위해서는, 저는 그 방법들에 접근할 수 있어야 할 것입니다.MapView의 구성 요소StatusBarVue에서 가능하지 않은(또는 적어도 관용적인) 구성 요소.

몇 가지 다른 옵션을 볼 수 있지만, 장점은 잘 모르겠습니다.

• 나는 글로벌 이벤트 버스를 이용할 수 있었고, 그리고.mousemove의 이벤트 처리기MapView구성 요소는 다음에 대한 참조를 포함하는 이벤트를 발생시킬 수 있습니다.MapView의론으로서그러면 그.StatusBar구성 요소가 액세스할 수 있습니다.MapView지리적 좌표를 계산하는 방법이라고 할 수 있습니다.이렇게 하면 Vuex 스토어에 대한 커밋이 매우 자주 발생하는 것을 피할 수 있지만, 실제로 더 효율적일지는 모르겠습니다.게다가, 저는 여전히 효과적으로 지리적 계산을 하고 있을 것입니다.mousemove렌더링이라기보다는

• 아마도 나는 그것에 대한 참조를 저장할 수 있을 것입니다.MapView의 재산으로서$root그래서 그것의 방법에 직접 접근할 수 있습니다.StatusBar요소.이것은 흐리멍덩하게 느껴지고 나는 그것이 Vue에서 할 관용적인 것이 아니라고 확신합니다.

위의 두 가지 방법은 또한 두 가지 방법 사이의 엄격한 결합을 초래할 것입니다.StatusBar그리고.MapView성분, 이상적이지 않습니다.

• 세 번째 옵션은 단순히 내 목을 조르는 것입니다.mousemove실행 빈도가 낮은 핸들러입니다.그러나 상태 표시줄이 원활하게 업데이트되려면 여전히 1초에 10번 정도 실행되어야 하며, Vuex가 그렇게 자주 변경되는 데이터에 적합한 위치인지는 아직 확실하지 않습니다.

Vue에서 이 문제를 처리하는 관용적인(그리고 가장 성능이 좋은) 방법은 무엇입니까?그리고 Vuex 저장소는 자주 변경되는 데이터에 적합한 장소입니까?

커밋 콜의 수를 줄이기만 하면 될 것 같습니다.코드의 큰 부분을 리팩터링하기 전에 마우스에서 디바운스 또는 스로틀을 사용하여 콜백을 수행해 보십시오.
_.debounce는 무엇을 합니까? - debounce에 대한 좋은 설명입니다.

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

언급URL : https://stackoverflow.com/questions/52595063/share-state-between-vue-js-components-which-updates-on-mousemove