Vue.js Vuex提交太快

我有一个具有已创建方法的组件：

created() {
    this.initMap();
}

initMap用于初始化Google地图，具体取决于URL段是否对应于

“地图”

：

initMap() {
    const pathname = location.pathname.replace(/\/+$/, '');
    const segment = pathname.split('/').pop();

    if (segment === 'map') this.showMap();
}

上述代码位具有执行Vuex提交的

ShowMap

方法：

showMap() {
    this.$store.commit('showMap');
}

但是，此提交从未显示在我的Vue.js devtools中（在Vuex下）。监视Vuex的组件存储的值

showMap

正在更改，也从未触发

但是，如果我这样做：

setTimeout(() => {
    this.$store.commit('showMap');
, 100);

一切都按预期进行

我尝试这样做是因为更改实际上发生在我的Vue.js devtools中，因为如果我在

状态下查看，我可以看到更新的值

Vuex提交似乎启动得太快了。对此有什么办法吗？首先，为什么会发生这种情况

我甚至可以放一个
console.log（）
进入showMap提交，它可以工作，但仍然无法在devtools中获取，并且没有
设置超时
我的所有观察程序仍然无法正确触发。
因为这是一段时间以前的事，我不能100%确定我是如何修复的，但我认为这是通过使用Vue.js中的
$nextTick
实现的

通过等待
nextTick
可以确保DOM更新的调用堆栈已被清除。这可以防止可能依赖于DOM的其他部分的DOM更新触发过快

显然，这比简单地设置一个
setTimeout
更可靠，在我的示例中设置一个给定的
100
毫秒，因为如果您的DOM没有及时更新，它可能仍然会通过这个窗口

如果
setTimeout
解决了您的问题，我建议尝试
$nextTick

因为这是很久以前的事了，我不能100%确定我是如何修复的，但我认为这是通过使用Vue.js中的
$nextTick
修复的

通过等待
nextTick
可以确保DOM更新的调用堆栈已被清除。这可以防止可能依赖于DOM的其他部分的DOM更新触发过快

显然，这比简单地设置一个
setTimeout
更可靠，在我的示例中设置一个给定的
100
毫秒，因为如果您的DOM没有及时更新，它可能仍然会通过这个窗口

如果
setTimeout
解决了您的问题，我建议尝试
$nextTick

突变只是在状态中更改布尔值，还是在做更多的事情？@VamsiKrishna它只是更改布尔值。我猜，
$store
是在
创建
阶段设置的。尝试将您的
initMap
调用移动到
mounted
钩子。是
showMap
突变只是在状态中更改布尔值，还是它在做其他事情？@VamsiKrishna它只是更改布尔值。我猜
$store
是在
创建
阶段设置的。尝试将
initMap
调用移动到
mounted
hook。