关于Vue单文件组件的this.$store.commit()问题

Question

先贴源代码：
lowpolyEvent(){

 var vm = this;
 vm.$store.commit("UPDATE_LOADING", true);
 console.log("1");
 console.time("for-test");
 var img = new Image();
 img.src = vm.imgUrl;
 img.onload = function () {
   vm.parse(this).then((value) => {
   vm.$store.commit("UPDATE_LOADING", false);
   console.log("2");
   console.timeEnd("for-test");        
   vm.imgUrl = value;

});
}
}

vm.$store.commit("UPDATE_LOADING", true); 这段代码是显示loading的
vm.$store.commit("UPDATE_LOADING", false);这段是隐藏
但是奇怪的是，vm.$store.commit("UPDATE_LOADING", true)这段代码是在vm.parse(this).then()里面运行，也就是回调才运行，导致没有loading效果（true和false同时运行了）
不过打印的时候确实 先1 再 2 而且我还加了测试运行这段代码的时间，大概间隔1秒左右
也就是打印1之后，等1秒左右再打印出2

问题是：为什么vm.$store.commit("UPDATE_LOADING", true); 没有先运行呢？

Answer 1

loading是否加了transition.
试下用setTImeout代替imgOnload并且时间设置长一点看效果