Vue에서 프레젠테이션 데이터 관리(이벤트 크기 조정)
Vue 프로젝트를 수행하고 있으며 Vuex를 사용하여 애플리케이션 상태를 관리하고 있습니다.앱 뷰를 Vue 컴포넌트로 여러 개의 작은 레이아웃으로 구분했습니다.예를 들어, 데이터 베이스에 대한 레이아웃이 있습니다.header그리고 떠다니는stats를 클릭합니다.
제가 커스텀 디렉티브를 작성했습니다.stats현재, 이것은 값을 설정하는 부트스트랩과 비슷하며, 페이지가 그 지점을 넘어 스크롤 할 때,affixCSS 클래스가 요소에 추가됩니다.이 값은 의 높이를 기반으로 합니다.header앱이 반응하기 때문에 헤더에서 이 값을 계산해 주셨으면 합니다.outerHeight소유물.
이 작업을 수행하는 방법은 몇 가지 생각할 수 있지만 Vue가 적절한 방법을 모르겠습니다.
- 크기 조정 이벤트를 듣고 Vuex 스토어에서 헤더의 높이를 업데이트할 수 있습니다.그러나 매장에서 프레젠테이션 데이터를 관리하는 것은 좋지 않은 관행인 것 같습니다.
- 나는 통과할 수 있었다.
id부착 지시문 머리글의 사용getElementById높이를 체크합니다.하지만 이건 Vue를 완전히 우회하는 거야 - Method를 추가할 수 있습니다.
header높이를 반환하고, 양쪽을 유지하는 부모 구성 요소를 가집니다.header그리고.stats패널을 사용하여 접사 값을 업데이트합니다.단, 이 경우 문제가 발생합니다.header그리고.stats같은 부모를 공유하지 않습니다.
다른 옵션은 없나요?베스트 프랙티스는 무엇입니까?감사합니다!
저는 반드시 #1로 하겠습니다.Vuex를 통해 공유하겠습니다.Vuex는 단지 무대 매니저일 뿐이라는 것을 명심하세요.저장할 데이터의 종류에 대한 규칙은 없습니다.또, 이러한 데이터에 의존하는 컴포넌트가 많아져, 예측 가능한 형태로 변환되는 유일한 진실의 원천이 될 것이기 때문에, 그것을 사용하는 것이 가장 좋다고 생각합니다.다른 모든 옵션에는 페이지 상의 컴포넌트/인스턴스/요소를 결합하는 것이 포함됩니다.따라서 높이와 페이지 사이의 연결이 커질수록 이들 연결은 더욱 복잡해집니다.
또, 조작이나 평판을 사용하는 것만으로, 어디에서나 갱신할 수 있기 때문에, 페이지의 응답성이 높아집니다.
언급URL : https://stackoverflow.com/questions/45187968/manage-presentation-data-in-vue-resize-events
'programing' 카테고리의 다른 글
| 이 v-tabs Vuetify.js 컴포넌트를 작동시키려면 어떻게 해야 합니까? (0) | 2022.08.18 |
|---|---|
| typedef 구조 vs 구조 정의 (0) | 2022.08.18 |
| Vue3에서 Vue2 컴포넌트를 사용할 수 있습니까? (0) | 2022.08.18 |
| Visual Studio에서 작동하는 TypeScript용 Vue.js 2.0 타이핑을 가져오려면 어떻게 해야 합니까? (0) | 2022.08.18 |
| GCC C 코드의 비정적 선언 다음에 정적 선언을 해결하려면 어떻게 해야 합니까? (0) | 2022.08.17 |