Vuex 提交触发太快

Question

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

created() {
    this.initMap();
}

initMap是用来初始化Google个maps的，取决于URL段是否对应'map' 像这样：

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

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

上面的代码有一个 ShowMap 执行 Vuex 提交的方法：

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

然而，此提交从未出现在我的 Vue.js devtools（在 Vuex 下）。监视 showMap 正在更改的 Vuex 存储值的组件也从未触发。

如果我这样做：

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

一切都按预期进行。

我尝试这样做是因为更改实际上发生在我的 Vue.js 开发工具中，因为如果我在 state 下查看，我可以看到更新的值。

Vuex 提交似乎触发得太快了。有什么可以做的吗？为什么会发生这种情况？

我什至可以将 console.log() 放入 showMap 提交中并且它可以工作，但它仍然没有在 devtools 中被拾取并且没有 setTimeout 我所有的观察者仍然不正确触发器。

Answer 1

由于这是不久前的事，所以我不是 100% 确定我是如何解决这个问题的，但我认为是通过使用 Vue.js 中的 $nextTick。

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

显然，这比简单地设置一个 setTimeout 更可靠，让我们从我的例子中说 100 毫秒，因为如果你的 DOM 没有及时更新它可能仍然通过这个 window.

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

https://vuejs.org/v2/api/#Vue-nextTick

Vuex 提交触发太快

Vuex commit fires too fast

vue.js

vuejs2

vue-component

vuex