I have a component with a created method:
created() {
this.initMap();
}
The initMap is to initialize Google maps, depending on whether the URL segment corresponds to 'map' or not like so:
initMap() {
const pathname = location.pathname.replace(/\/+$/, '');
const segment = pathname.split('/').pop();
if (segment === 'map') this.showMap();
}
The above bit of code has a ShowMap method that performs a Vuex commit:
showMap() {
this.$store.commit('showMap');
}
This commit however never shows up in my Vue.js devtools(under Vuex).The components watching the Vuex store value that showMap is changing also never trigger.
If I do this however:
setTimeout(() => {
this.$store.commit('showMap');
, 100);
Everything works exactly as expected.
I tried this because the changes actually happen in my Vue.js devtools, because if I look under state I can see updated values.
The Vuex commit seems to fire too fast. Is there anything that can be done about this? Why is this happening in the first place?
I can even put a console.log() into the showMap commit and it works but it still does not get picked up in the devtools and without the setTimeout all of my watcher still don't properly trigger.
Since this was a while ago I am not 100% sure how I fixed this but I think it was by using $nextTick from Vue.js.
By waiting on nextTick you ensure that your call stack for DOM updates has been cleared. This prevents DOM updates that might rely on other parts of your DOM from firing too fast.
Obviously this is way more reliable than simply setting a setTimeout with a given number of let's say 100 milliseconds from my example because if your DOM does not update in time it might still pass this window.
If setTimeout fixed your issue I suggest trying $nextTick.