Vuejs : 구성 요소 간의 공유 상태

Question

Vuejs의 구성 요소간에 공유 상태를 구현하는 가장 좋은 방법을 알고 싶습니다.

상황 A : 모달을 보여주는 웹 앱이 있다고 상상해보십시오. 모달은 부울 상태 show입니다. 모달 OK 버튼을 클릭하면이 상태가 변경되지만 백그라운드의 일부가 클릭되고 일부 서버 푸시 상태 변경시에도 변경됩니다. 따라서 모달은 부모 앱처럼 상태를 변경할 수 있어야합니다.

상황 B : 공통 데이터를 공유하는 다른 구성 요소 안에 입력 필드를 표시하는 웹 앱이 value입니다. 사용자가 한 구성 요소의 필드를 통해 value을 변경하면 다른 구성 요소에서도 업데이트해야합니다. 다시 두 가지 모두 서버 푸시 이벤트에서 업데이트되어야합니다.

질문 : 내가

• 바로 이것에 대해 갈 수있는 올바른 방법이 vuex를 사용하고 공유 상태 모든 구성 요소에 의해 관찰 및 방출 행동을 통해 변경되는 저장 필드를하게 될 것이라고/부모는 그 가치를 수정할 필요가 있습니까?

• 우리가 Meteor에서 알 수있는 위험한 (취급하기가 어렵 기 때문에) 이런 종류의 마법 반응을 소개하지 않습니까?

• 흐름을 문서화하는 가장 좋은 방법은 무엇입니까?

Answer 1

: 모달 구성 요소의 경우, 내가 show는 소품되어야한다고 말하고 싶지만. 따라서 부모 구성 요소는 원하는 모든 모달을 제어 할 수 있습니다. 이 경우에는 공유 상태가 전혀 없습니다.

모달 자체는 서버에 대해 알 필요가 없습니다. show이 true 인 경우 모달을 표시하고 반대의 경우도 마찬가지입니다.

마스크 레이어가 모달의 일부라고 생각하므로 마스크를 클릭하면 모달이 이벤트를 내 보냅니다. 부모 구성 요소는 이벤트를 수신하고 모달을 숨기거나하지 않도록 결정할 수 있습니다. https://vuejs.org/v2/examples/modal.html

---

B :

뷰는 여기에 공식 모달 예를 (감사 언급에 대한 @craig_h)이 바로 입력에 vuex 상태를 바인딩합니다. 아무 잘못 없음.

---

모든 구성 요소가 vuex 저장소에 직접 액세스해야하는 것은 아닙니다. 일부 순수 UI 구성 요소의 경우 소품 만 사용하십시오. 따라서 상위 구성 요소에는 구성 요소를 제어하고 유연성을 높일 수있는 권한이 있습니다.

나는 당신이이 문서를 읽는 것이 좋습니다

• https://facebook.github.io/react/docs/lifting-state-up.html
• https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.j7ry4a3as
• http://redux.js.org/docs/basics/UsageWithReact.html

예 다음은/돌아 오는 워드 프로세서 반응한다. Vue는 상대적으로 젊기 때문에 반응 커뮤니티에는 더 많은 문서/기사가 있습니다. 그러나 Vue와 React는 모두 컴포넌트 기반 라이브러리입니다. 구성 요소를 어떻게 디자인하는지에 대한 아이디어는 기본적으로 동일합니다. https://github.com/vuejs/vuex/tree/dev/examples/chat

이것은 매우 간단한 예제이지만 제가 위에서 언급 한 모든 일을 사용하여 수행합니다

또한이 vuex 예를 살펴 수 있습니다. 이벤트를 내보내는 일부 순수 UI 구성 요소 ...