2016-10-29 6 views
1

은 내가 Vue 인스턴스 변수 radioStatus를보고 :시계가 비동기입니까?

watch: { 
    radioStatus: function(val) { 
     if (!this.discovery) { 
     $.ajax({ url: '/switch/api/radio/' + (val ? 'on' : 'off') }) 
     } 
    } 
이 페이지를 다시로드에 트리거 AJAX를 호출에서 변경 될 수

가 :

$.ajax({ 
    url: "/api", 
    cache: false 
}) 
    .done(function(response) { 
    vm.discovery = true; 
    vm.radioStatus = response.radio.ison; // <-- the change I mention below is here 
    vm.discovery = false; 
    }); 

나는 방법 모두에 의해 트리거 있다고 가정 할 수 있습니다 radioStatus 변경은 다음 줄로 가기 전에 완료됩니다 (즉, vm.discovery = false)?

vm.discovery은 여러 가지 감시 변수 (radioStatus과 같은 방식)에서 사용되는 플래그이며 감시 변수의 기능이 완료되기 전에 전환된다는 사실에 우려하고 있습니다.

답변

1

예, 시계가 비동기입니다. 참고 : https://vuejs.org/guide/computed.html#Watchers

위의 링크에서 인용 :

당직자

계산 특성이 있지만 ... 당신이 변화에 따라 비동기 또는 고가의 작업을 수행 할 때 가장 유용합니다 데이터. 위의 경우

vm.discovery = false;watch에 가기 전에 완료됩니다. vm.discoveryfalse으로 설정하면 radioStatus 안에있는 ajax 호출이 항상 실행됩니다. 다음과 같이

것을 방지하기 위해, 당신은 vm.$nextTick()을 시도 할 수 있습니다 :

$.ajax({url: "/api", cache: false}) 
    .done(function(response) { 
     vm.discovery = true; 
     vm.radioStatus = response.radio.ison; 
     vm.$nextTick(() => { 
      console.log("Setting vm.discovery to false"); 
      vm.discovery = false; 
     }); 
    }); 

그것은 할 수있는 까다로운 일이 다시입니다 - watchradioStatus() 콜백는 단지 nextTick에 무슨 일이 일어날 때문이다. 그러나 시계가 이전 라인 자체 (vm.radioStatus = ...)에 의해 트리거되었다고 가정하면 기술적으로 대기열에 들어가야하기 때문에 먼저 완료해야합니다. 일련의 console.log 문으로 확인해야합니다.