Vuejs: 구성 요소 간 공유 상태

Vuejs: 구성 요소 간 공유 상태

나는 Vuejs에 있는 구성요소들 간의 공유 상태를 구현하기 위한 최선의 방법을 알고 싶다.

상상 상황 A: 당신은 모달(모달)을 보여주는 웹 앱을 가지고 있다.모달의 부울 상태가 있음show. 이 상태는 모달 OK-버튼을 클릭했을 때 변경되어야 하지만 또한 배경의 어떤 부분을 클릭했을 때 변경되어야 하며, 심지어 어떤 서버 푸시 상태 변경에서도 변경되어야 한다.따라서 모달은 부모 앱처럼 상태를 변경할 수 있어야 한다.

상황 B: 공통 데이터를 공유하는 여러 구성 요소 내부의 입력 필드를 보여주는 웹 앱이 있음value. 사용자가 변경되는 경우value한 구성 요소의 필드를 통해 다른 구성 요소에서도 업데이트해야 한다.다시 말하지만 둘 다 서버 푸시 이벤트에서 업데이트해야 한다.

질문:

• 올바른 방법으로 vuex를 사용하고 공유 상태를 해당 값을 수정해야 하는 모든 구성 요소/부모의 방출된 작업을 통해 관찰되고 변경되는 스토어 필드로 만드는 것이 옳다.

• 그것은 우리가 유성으로부터 알고 있는 이런 종류의 위험한 마법 반응성을 소개하지 않는가?

• 흐름을 가장 잘 문서화하는 방법, 무엇에 따라 달라지는가?

A: 모달 컴포넌트의 경우, 나는 이렇게 말하고 싶다.show소품이 되어야 한다.그래서 모달은 모달(모달)을 원하는 대로 조절할 수 있다.이 경우 공유 상태가 전혀 없다.

모달 자체는 서버에 대해 아무것도 알 필요가 없다.만약 소품이라면show이다true, 단지 모달과 그 반대로만 표시한다.

마스크 레이어가 모달의 일부인 것 같아 마스크를 클릭하면 모달은 이벤트를 내보낸다.상위 구성요소는 이벤트를 수신하고 모달의 숨김 여부를 결정할 수 있다.

Vue는 여기에 공식적인 모달 예를 가지고 있다(참고해줘서 @craig_h 고마워).https://vuejs.org/v2/examples/modal.html

---

B: vuex 상태를 입력에 바인딩하십시오.아무 문제 없어.

---

일부 구성 요소가 vuex 저장소에 직접 액세스할 필요는 없다는 점에 유의하십시오.일부 순수한 UI 구성 요소의 경우 소품만 사용하십시오.그래서 부모 구성요소는 그것들을 통제하고 유연성을 증가시킬 권리가 있다.

다음 문서를 읽어보십시오.

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

예, 리액션/리듀렉스 문서 입니다.Vue는 비교적 젊기 때문에, 반응 커뮤니티에는 더 많은 문서/기사가 있다.그러나 Vue와 React는 모두 구성요소 기반 라이브러리다.구성 요소를 설계하는 방법에 대한 생각은 기본적으로 동일하다.

다음 vuex 예도 살펴보십시오. https://github.com/vuejs/vuex/tree/dev/examples/chat

이것은 매우 간단한 예지만 내가 위에서 언급한 모든 것을 사용한다.이벤트를 내보내는 중, 일부 순수한 UI 구성 요소...

참조URL: https://stackoverflow.com/questions/42746863/vuejs-shared-states-between-components