在vueJS中导航时，事件点击不起作用

Question

我有一个菜单，当您单击箭头时，它将展开，如果再次单击，则会收缩。我开发了将此选项添加到div的CSS类（.show）。当我导航到另一页面时，会出现问题，我将尝试显示/隐藏菜单中的箭头单击，在此刻什么也没发生... 为什么单击事件消失了？ @ click可能失去功能如果您更改路由器视图？

function showNav () {
  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)
  }
}

.container-menu {
  position: absolute;
  top: 65px;
  right: 0;
  width: 50px;
  min-height: calc(100vh - 20px);
  height: 100%;
  background-color: #072146;
  border: solid #fff;
  border-width: 0 0 0 1px;
  z-index: 999;
  transition: all .5s ease-in-out;

  .control {
    display: flex;
    justify-content: center;
    align-items: center;
    //width: 50px;
    margin-bottom: 10px;
    color: #fff;
    i {
      font-size: 2rem;
      cursor: pointer;
      transition: all .5s ease-in-out;
    }
  }

  &.show {
    width: 160px;
    .control > i {
      color: #fff;
      transform: rotateZ(-180deg);
    }
  }

  .navigation-icons-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50px;
    float: right;
    i {
      color: #fff;
      font-size: 2rem;
      padding: 10px 0;
      cursor: pointer;
      transition: all .5s ease-in-out;
      &:hover {
        color: #fff;
      }
    }
  }
  .navigation-links-menu {
    //padding:14px;
    float: right;
    color: #fff;
    div {
      font-size: 1.35rem;
      padding: 10px;
      cursor: pointer;
    }
  }
}

<div class="navigation__menu">
	<div
	  class="container-menu"
	  :class="{'show': this.$store.getters.showSidebar}">
	  <div
		class="control"
		@click="showNav">
		<i
		  class="fas fa-angle-double-left" />
	  </div>
	  <div class="navigation-links-menu">
		<transition-group name="fade">
		  <div
			v-show="this.$store.getters.showLink"
			key="1">Home</div>
		  <div
			v-show="this.$store.getters.showLink"
			key="2">FIG</div>
		  <div
			v-show="this.$store.getters.showLink"
			key="3">Validation</div>
		  <div
			v-show="this.$store.getters.showLink"
			key="4">Authorization</div>
		</transition-group>
	  </div>
	  <div class="navigation-icons-menu">
		<router-link :to="`/`"><i class="fas fa-home" /></router-link>
		<router-link :to="`/console`"><i class="fas fa-clipboard-list" /></router-link>
		<i class="fas fa-check" />
		<i class="fas fa-check-double" />
	  </div>
	</div>
 </div>

Answer 1

一种解决方案可能是更改您的突变以切换showSidebar状态，而不是对其进行设置。这将使您可以删除if / else流，而不必担心当前状态。

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
    }
}

[当您像下面那样用吸气剂检查状态时，您可能希望this.$store.getters.showSidebar为假时会变为真，但您在两次点击之间错过了500ms基准。

  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)
  }

我推荐的另一种解决方案是禁用调用showNav的元素，直到超时结束，但是第一种解决方案可能就足够了。