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();