Vue.js布尔值检查异常：未登录时仍触发TOGGLE_LIKED

看起来你遇到的核心问题是：虽然check()方法在未登录时返回了false，但TOGGLE_LIKED这个action还是被调用了对吧？这大概率是因为你没有在触发TOGGLE_LIKED的地方，用check()的返回值做拦截判断。

我给你几个具体的解决思路：

1. 在触发操作的入口处添加拦截 #

假设你是通过点击按钮或者某个方法触发TOGGLE_LIKED，那一定要先调用check()，只有当它返回true（即已登录）时，再执行dispatch操作。

比如原来的代码可能是这样的（直接触发，没做判断）：

<button @click="$store.dispatch('TOGGLE_LIKED')">点赞</button>

或者methods里的方法：

methods: {
  toggleLike() {
    this.$store.dispatch('TOGGLE_LIKED')
  }
}

那修改后应该变成：

<button @click="toggleLike">点赞</button>

methods: {
  check() {
    // 简化判断逻辑，!user已经覆盖了undefined和空值的情况
    const user = this.$store.state.user
    if (!user) {
      alert('please signin in the upper-right'); /* eslint-disable-line no-alert */
      return false
    }
    return true
  },
  toggleLike() {
    // 先检查登录状态，通过后再触发action
    if (this.check()) {
      this.$store.dispatch('TOGGLE_LIKED')
    }
  }
}

2. 可选：用全局拦截做更通用的控制 #

如果你的项目里有很多类似需要登录才能触发的操作，也可以考虑在Vuex的action里统一添加登录判断，比如封装一个工具函数，所有需要登录的action都先调用这个函数验证。不过针对当前这个问题，第一种方法已经足够直接有效。

关键提醒 #

一定要确保check()的返回值被正确使用——很多时候问题出在调用check()但没去判断它的结果，比如只是执行了this.check()，但没写if条件，那自然无法阻止后续的dispatch操作。

内容的提问来源于stack exchange，提问作者timpone