다른 Vue 컴포넌트에서 Vue 컴포넌트의 위치를 갱신하는 방법('반복')
Tl;dr: 다른 컴포넌트에서 컴포넌트 위치를 (계속적으로) 업데이트하려면 Vuex 스토어와 이벤트 버스 중 어느 쪽을 사용하는 것이 더 좋습니까?
응용 프로그램
사용자가 직접 비순환 그래프를 만들 수 있는 응용 프로그램을 만들고 있습니다.간단히 말해서, 캔버스가 있고panels각 패널에는 여러 개의 패널이 있습니다.inputs및 복수outputs사용자는 다른 패널의 입력에 출력을 연결할 수 있습니다.connector패널은 캔버스 위로 드래그 할 수 있으며, 최종적으로 패널은 다른 입력과 출력으로 동적으로 생성됩니다.
____________ ____________
| PANEL | | PANEL |
| | | |
|.input1 | |.input3 |
|.input2 | ,---- |.input4 |
| | / | |
| output1.| ---' | output5.|
| output2.| | output6.|
|__________| |__________|
(실제 어플리케이션은 ascii art가 아닙니다, btw)
응용 프로그램의 모든 개체는 Vuex Store에 있으며 응용 프로그램은 스토어를 기반으로 렌더링합니다.
store:{
panels: { ...paneldetails..., id}[],
inputs: { ...inputdetails..., id}[],
outputs: { ...outputdetails..., id}[],
connections: { ...inputId, outputId..., id}[],
}
사용자는 캔버스 상에서 패널을 드래그할 수 있습니다.즉, 커넥터도 한 번에 한쪽 끝에서 드래그 할 수 있습니다.제 질문은 바로 여기에 있습니다.업데이트 방법connector의 장소, 의 경우panel이동 중입니까?
저는 다음 두 가지 방법을 생각했습니다.
A ) 스토어의 각 입력 및 출력 위치를 추적합니다.x와 y는 움직이면 바로 아이디와 함께 저장합니다.각 연결의 한쪽 끝을 가게의 그 물건에 묶으면 그걸로 끝입니다.누군가 화면에서 패널을 끌고 다니면 수십 개의 저장소가 새로워집니다.
B ) 이벤트버스가 이동할 때 각 입력 및 출력 위치를 해당 ID를 키로 하여 이벤트버스를 통해 전송합니다.커넥터는 자신이 알고 있는 입력 및 출력의 ID를 수신하고, 그들이 무언가를 '수신'할 때 업데이트합니다.
퍼포먼스에 최적인 접근법이 무엇인지 잘 모르겠습니다.스토어는 지속적인 업데이트에 적합하지 않을 수 있습니다.
언급URL : https://stackoverflow.com/questions/65206116/how-to-update-vue-components-location-from-another-vue-component-semicontinuo
'programing' 카테고리의 다른 글
| Vue 2 및 JSX를 사용하여 사용자 지정 이벤트 바인딩 (0) | 2022.07.30 |
|---|---|
| Vuejs에서 v-select 옵션을 동적으로 사용하지 않도록 설정하는 방법 (0) | 2022.07.30 |
| perror("...")와 fprintf("stderr, "...")는 언제 사용해야 합니까? (0) | 2022.07.30 |
| TypeError: 'undefined' 또는 'null'의 속성 'compile'을 파기할 수 없습니다. (0) | 2022.07.30 |
| 스트림의 개념을 설명할 수 있나요? (0) | 2022.07.30 |