Vuex 스토어 변경으로 렌더 새로 고침을 트리거하는 방법

Vuex 스토어 변경으로 렌더 새로 고침을 트리거하는 방법

UI 컴포넌트를 구현하려고 하고 있으며, 현재 드롭다운 작업을 하고 있습니다.드롭다운을 열려면 다른 모든 항목을 닫아야 하므로 Vuex를 사용하려고 합니다.전역 상태를 유지하려면 저장하십시오. 상태 변경 시 보기를 새로 고치는 올바른 방법이라고 읽었으므로.하지만 나한테는 잘 안 먹혀.

다음은 저의 현재 시도입니다.https://jsfiddle.net/2y573o24/1/

없이.this.$forceUpdate()뷰가 메서드에서 업데이트되지 않습니다.그러나 공유 상태의 포인트인 현재 컴포넌트는 강제로 갱신되지만 다른 컴포함된 컴포넌트는 다른 컴포넌트를 갱신하지 않습니다.

편집 1: 여기서 mapState를 사용하려고 합니다.https://jsfiddle.net/2y573o24/3/

EDIT2: Vuex docs 카운터 예제를 처음부터 사용했는데 어느 정도 효과가 있었습니다.https://jsfiddle.net/ssr9pkLa/1/

단, state immediate root child(ddCounter)를 업데이트하여 템플릿에 표시해야 합니다.상태 객체에 대한 변경을 추적할 방법이 없다는 의미입니까?

솔루션을 설명하기 위해 작은 JsFiddle을 만들었습니다.https://jsfiddle.net/2y573o24/4/

기본적으로 다음 변수를 사용합니다.selectedDropdown:

  state: {
    dropdowns: {},
    selectedDropdown: null
  }

뷰에서 이 값을 체크하기만 하면 됩니다.

  <div>
    <a href="#" @click.prevent="dropdownToggle('A')">Toggle A</a>
    <div v-show="selectedDropdown === 'A'">
      Toggle A ON
    </div>
  </div>

언급URL : https://stackoverflow.com/questions/41204821/how-to-make-vuex-store-changes-trigger-render-refresh