如何在 VueJS 3 中触发监视钩子答案

【问题标题】：How to trigger watch hook in VueJS 3如何在 VueJS 3 中触发监视钩子
【发布时间】：2020-05-09 02:58:40
【问题描述】：

我正在开发一个 VueJS 应用程序，我想在其中观察来自 vuex 商店的用户状态的变化并做一些事情。更改正在发生，但未触发监视挂钩。

这是计算属性和手表的代码。

computed: {
    formIsValid() {
      return (
        this.form.company &&
        this.form.street &&
        this.form.phone &&
        this.form.selectedRole &&
        this.form.selectedStatus &&
        this.form.email &&
        this.form.industry &&
        this.form.password
      );
    },
    user() {
      this.$store.getters.getUser;
      console.log("Computed" + this.$store.getters.getUser.id);
    }
  },

  watch: {
    user(value) {
      console.log("A change has occured");
      console.log({ user: value });
      if (value !== null && value !== undefined) {
        console.log("ama is going");
        this.$router.push({ name: "Jobs" });
      } else {
        console.log("The thing is null");
      }
    }
  },

【问题讨论】：

"VueJS 3 中的 watch hook" 在 vue 组合 API 中没有 watch，但我们确实有 watchEffect。

标签： vue.js vuex watch

【解决方案1】：

在您的 user 计算方法中，您不是 return-ing 值。我怀疑如果你查看 Vue devtools，计算得出：用户的值为 undefined。

我相信你的改变应该是……

computed: {
  user() {
    console.log("Computed" + this.$store.getters.getUser.id);
    return this.$store.getters.getUser;
  }
}

【讨论】：