VueX 돌연변이 진행 상황을 추적하는 VueJs 진행률 막대

Question

VueX 돌연변이의 실시간 진행률을 추적하는 진행률 막대를 만드는 데 문제가 있습니다.

사용자가 버튼을 클릭 할 때 돌연변이를 실행하는 버튼 구성 요소가 있습니다. 이 돌연변이는 배열을 거치며 배열의 각 항목에 대해 함수를 수행합니다. 이 기능을 수행하는 동안 상점의 '진행'상태를 갱신합니다. 계산 된 속성으로 저장소에서이 '진행률'상태를 읽는 진행률 막대 구성 요소가 있습니다.

진도 상태가 업데이트 될 때 진행률 표시 줄도 변경되지만 DOM 업데이트와 관련하여 업데이트가 진행되는 즉시 문제가있는 것으로 보입니다. 내 돌연변이가 실행되고 진행률 표시 줄이 0에서 100 사이로 업데이트되지 않고 진행됩니다.

나는 나는 내가 '진행'상태를 업데이트하고 나의 DOM은 빨리 다시 그릴되지 않고이

Answer 1

을 달성 어떤 방법이 있는지 나는 것으로 나타났습니다 이유를 개념화하는 문제를 가진 것 같아 'for'루프를 사용하여 배열을 처리하여 dom을 정지시키고 다시 렌더링하지 못하게합니다. 이 문제를 해결하기 위해 'setTimeout'호출을 사용했습니다. 이것은 해킹처럼 보이지만이 문제에 반대하는 다른 누군가를 도울 것입니다. 더 많은 답변을 감사. 나를 에릭 구안 덕분에 나를이 길로 가게했다. 여기 또 다른 게시물에 대한 답을 발견 ->How to stop intense Javascript loop from freezing the browser

var self = this; 
     var animals = ['dog', 'cat','lion','tiger','bear']; 
     var processing = function() {    
      var animal = animals.shift(); 
      console.log(animal); 
      if (animals.length > 0) { 
       console.log(animals.length); 
       var timer = setTimeout(processing, 1000); 
       self.$store.commit('updateStatus', {progress : animals.length*20, msg: 'Progress Bar Test', status: 'processing', display: true}); 
      } else { 
       console.log('clearing timeout'); 
       self.$store.commit('updateStatus', {progress : 100, msg: 'Progress Bar Test', status: 'processing', display: false}); 
       clearTimeout(timer); 
      } 
     } 
     processing();