Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

vuex 传值使用watch监听

组件的关系image.png
实际效果
image.png

点击 -> 未完成 会进行筛选
// 菜单回调
    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:
      }
    },

image.png

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

以上是传值的代码

// 在列表页监听 filterTasks 如果有变化就调 this.taskList()传值 获取到筛选后的数据

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
求大佬指导  或者有其他的方法传值也可以 
谢谢

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...