VueJs 进度条来跟踪 VueX 突变进度答案

【问题标题】：VueJs Progress Bar to track VueX mutation progressVueJs 进度条来跟踪 VueX 突变进度
【发布时间】：2017-12-12 00:42:56
【问题描述】：

我在创建进度条以跟踪 VueX 突变的实时进度时遇到问题。

我有一个按钮组件，当用户单击按钮时会运行一个突变。这个突变通过一个数组并对数组中的每个项目执行一个函数。在执行此功能时，它会更新商店中的“进度”状态。我有一个进度条组件，它从存储中读取这个“进度”状态作为计算属性。

我希望随着进度状态的更新，进度条也会更新，但似乎我遇到了 DOM 的问题。在更新时尽快渲染更改。我的突变运行，进度条从 0 变为 100，中间没有更新。

我想我在概念化为什么我的 DOM 没有像我更新“进度”状态那样快速重绘以及是否有任何方法可以实现这一点时遇到了问题

【问题讨论】：

很可能是因为您的变更是同步的，因此即使您正在更新进度状态，UI 也无法更新，直到您的变更完成。您需要“分块”您的更新以允许 UI 更新，这通常在 X 次迭代后通过 setTimeout 为 0 来完成。另外，会不会是因为更新太快而无法直观地看到？
这对于我的发现基本正确。在处理我的数组元素时，我使用了 setTimeout 来不“冻结”DOM。我会在下面添加一个答案

标签： vue.js progress-bar vuex mutation

【解决方案1】：

我发现我用来处理我的数组的“For”循环“冻结”了 dom 并阻止它重新渲染。为了解决这个问题，我使用了“setTimeout”调用。这似乎是一个 hack，但希望能帮助遇到这个问题的其他人。更多答案表示赞赏。感谢@Eric Guan 让我走上了这条路。我在这里的另一篇文章中找到了答案 -> 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();

【讨论】：