Question

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

created() {
    this.initMap();
}

initMap用于初始化Google地图，具体取决于网址段是否与'map'相对应，或者不是这样：

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下）。观察showMap正在改变的Vuex存储值的组件也永远不会触发。

如果我这样做：

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

一切都与预期完全一致。

我试过这个，因为这些更改实际上发生在我的Vue.js devtools中，因为如果我查看state，我可以看到更新的值。

Vuex提交似乎太快了。有什么可以做的吗？为什么这首先发生？

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

Answer 1

由于这是一段时间以前我不是100％确定如何解决这个问题，但我认为这是通过使用来自Vue.js的$nextTick。

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

显然，这比仅仅设置一个setTimeout给定的100比我的示例setTimeout毫秒更可靠，因为如果你的DOM没有及时更新它可能仍然通过这个窗口。

如果$nextTick解决了您的问题，建议您尝试actionBar.setHomeAsUpIndicator(R.drawable.hamburger_icon);。

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

Vuex提交过快

1 个答案: