[Vuejs]-Event click doesn't work when navigate in vueJS

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.

Leave a comment