张张哦
2020-09-04 11:27
采纳率: 50%
浏览 1.6k

vuex 传值使用watch监听,触发了两次watch?

组件的关系
图片说明

实际效果
图片说明

点击 -> 未完成 会进行筛选
// 菜单回调
    handleSelect(index) {
      switch (index) {
        case '未完成':
          this.typeData.statuses = ['undo', 'doing', 'to_confirm'];
          this.$store.commit('filterTasks', '未完成');
          break;
        case '今日':
          this.$store.commit('filterTasks', '当天任务');
          break;
        case '本周':
          this.$store.commit('filterTasks', '本周任务');
          break;
        case '我负责的':
          this.$store.commit('filterTasks', '我负责的');
          break;
        case '我参与的':
          this.$store.commit('filterTasks', '我参与的');
          break;
        default:
      }
    },

图片说明

点击右侧的-> ~~~~当天任务也会进行筛选
 // 通过vuex 传值 点击获取到具体某一个值,存储到vuex里
    filterTasks(val) {
      this.$store.commit('filterTasks', val);
    },

以上是传值的代码

watch: {

filterTasksVal(newVal) {
  if (newVal === '全部') {
    this.taskList();
  } else if (newVal === '当天任务') {
    // 1. 获取当天时间
    const defaultDate =                         this.timeConversion(this.date.defaultDate);
    const startTime = `${defaultDate} 00:00:00`;
    const endTime = `${defaultDate} 23:59:59`;
    this.typeData.createTime = [startTime, endTime];
    this.taskList();
  } else if (newVal === '我负责的') {
    // 4. 获取当前用户名的 用户id
    this.typeData.leadUser = this.userId;
    this.typeData.userValue = [];
    this.typeData.createTime = '';
    this.taskList();
  } else if (newVal === '未完成') {
    this.typeData.leadUser = '';
    this.typeData.createTime = '';
    this.taskList();
  } 
}

现在有一个问题是 使用这种方法会触发两次watch
点击右侧的菜单栏进行筛选,会触发一次接口,
在 -> 点击未完成,就会触发两次watch

想不明白这种情况下为什么会触发两次watch
求大佬指导 或者有其他的方法传值也可以
谢谢

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

1条回答 默认 最新

  • 评论
    解决 无用 6
    打赏 举报

相关推荐 更多相似问题