vuex 传值使用watch监听

发布于 2022-09-12 04:29:42 字数 2003 浏览 22 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文