1👍
A solution may be changing your mutation to toggle the showSidebar
state instead of setting it. This will allow you to remove your if/else flows and not to worry about the current state.
function showNav () {
this.$store.commit(TOGGLE_SHOW_LINK)
setTimeout((vue) => {
vue.$store.commit(TOGGLE_SHOW_SIDEBAR)
}, 500, this)
}
// mutations.js
mutations: {
TOGGLE_SHOW_SIDEBAR (state) {
state.showSidebar = !state.showSidebar
},
TOGGLE_SHOW_LINK (state) {
state.showLink = !state.showLink
}
}
When you check the state with your getter like below, you’re probably expecting your this.$store.getters.showSidebar
to become true when it’s false, but you’re missing this 500ms benchmark between clicks.
if (this.$store.getters.showSidebar) {
this.$store.commit(SET_SHOW_LINK, false)
setTimeout(() => {
this.$store.commit(SET_SHOW_SIDEBAR, false)
}, 500)
} else {
this.$store.commit(SET_SHOW_SIDEBAR, true)
setTimeout(() => {
this.$store.commit(SET_SHOW_LINK, true)
}, 500)
}
Another solution I recommend is disabling the element that calls showNav, until the timeout ends, but the first solution may be enough.
- [Vuejs]-Font awesome icons size jumps in first load of a static page with vue.js
- [Vuejs]-Britechart – How to add icon images to chart y axis
Source:stackexchange.com