디스패치 수신이 값으로 정의되지 않았습니다.

디스패치 수신이 값으로 정의되지 않았습니다.

디스패치 후 상태 갱신에 문제가 발생.

콘솔 로깅 결과dispatch드라마들.Promise pending및 가치undefined그래서 가게에는 절대 가지 않아요

콘솔 결과

다음에 나타내는 함수는dispatch핸들러

unsetSelected() {
   let some = this.$store.dispatch('user/selectedDevice', null)
   console.log(some)
}


<span class="ellipsis" @click="setSelected(device)">
     <i v-if="selectedDevice && selectedDevice.id == device.id"
        @click="unsetSelected()"
        class="fa fa-times-circle">
     </i>
     <i v-else="" class="fa fa-ellipsis-v"></i>
</span>

액션 핸들러는 다음과 같습니다.

selectedDevice ({ commit }, data) {
    commit ('SELECTED_DEVICE', data);
}

변이 핸들러에 경보를 발령했는데 코드가 예상대로 작동하고 있다는 것을 알게 되었습니다. 코드도 정상적으로 동작하고 있고dispatch위의 DOM으로 기능합니다.

쇠사슬로 묶어야 한다..stop수식자:@click.stop="unsetSelected()"

디스패치 인스턴스 메서드의 Vuex API 참조:

트리거된 모든 작업 처리기를 확인하는 약속을 반환합니다.

그래서 전화한다dispatch약속을 반환합니다.컴포넌트 내부에서 데이터를 수신하려면 이 약속을 해결해야 합니다.

구성 요소의 방법을 다음과 같이 수정할 수 있습니다.

// using async/await
async unsetSelected() {
  try {
    let some = await this.$store.dispatch('user/selectedDevice', null)
    console.log(some)
  } catch (error) {
    // handle error
  }
}

// using Promise API
unsetSelected() {
  this.$store.dispatch('user/selectedDevice', null)
    .then((some) => {
      console.log(some)
    })
    .catch((error) => {
      // handle error
    })
}

또한.selectedDevice데이터는 반환되지 않습니다.some(또는 응답) 해결된 약속에서undefined예를 들어, 문제의 코드를 입력합니다.

이 문제를 해결하려면 스토어 액션에return원하는 데이터가 포함된 문을 사용하여 컴포넌트로 돌아갑니다.

단, Vuex 아키텍처에 따라 상태 변환이 커밋된 후 값이 반응적으로 업데이트되는 상태/게터를 매핑하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/53301922/dispatch-receiving-undefined-as-a-value