vuex의 상태 변화를 동기적으로 감시하려면 어떻게 해야 합니까?

vuex의 상태 변화를 동기적으로 감시하려면 어떻게 해야 합니까?

opensource vuejs + vuex 프로젝트를 사용하고 있습니다.이것은 소스 https://github.com/misterGF/CoPilot/tree/master/src/components 입니다.

현재 어떤 컴포넌트에서 다른 컴포넌트로 이벤트를 트리거하는 방법을 알 수 없습니다.

사용할 수 있습니다.this.$state.store.commit("foo", "bar")vuex에 정보를 저장하지만, 두 개의 분리된 정보가 두 개 다를 경우export default {}foo가 baz로 변경되었을 때 어떻게 앱을 인식시킬 수 있는지 모르겠습니다.앱을 새로고침/재로드하지 않으면 변경 내용을 알 수 없습니다.

이걸 쓰세요.$store.watch는 컴포넌트를 감시합니다.Created()는 적절한 장소입니다.감시할 상태를 전달하고 콜백이 변경되었을 때 콜백을 지정합니다.Vuex 문서에는 좋은 예가 없습니다.자세한 내용은 이 Vuejs 포럼 페이지를 참조하십시오.저장소 감시 기능은 VM과 동일합니다.$watch, 자세한 내용은 Vue 문서를 참조하십시오.

this.$store.watch(
  (state)=>{
    return this.$store.state.VALUE_TO_WATCH // could also put a Getter here
  },
  (newValue, oldValue)=>{
    //something changed do something
    console.log(oldValue)
    console.log(newValue)
  },
//Optional Deep if you need it
    {
      deep:true
    }
  )

당신의 질문이 완전히 명확하지 않기 때문에 여기서 몇 가지 추측을 해보겠습니다.

단순히 앱이 스토어 값이 변경된 시점을 알고 싶다면 워처를 사용하여 스토어 게터에 직접 연결된 계산된 속성을 볼 수 있습니다.

그래서 감시자를 이렇게 세팅할 수배자:

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
},
watch:{
    doneTodosCount(value) {
       console.log(`My store value for 'doneTodosCount' changed to ${value}`);
    }
}

커밋의 현재 값이 무엇인지에 따라 다르게 동작하고 싶은 경우foo속성이 로 설정되어 있는 경우는, 커밋 기능에서 간단하게 확인할 수 있습니다.

질문이 더 있으면 알려주세요.

언급URL : https://stackoverflow.com/questions/46096261/how-can-i-watch-synchronously-a-state-change-in-vuex