Solution to the problem of repeated triggering of functions in Vue project watch

Problem description:

There are two pages A and B, each page has a getList() method. Both methods need to pass the same parameter C, and the process of selecting parameter C is rather complicated. In order to avoid the problem of repeatedly selecting parameter C when switching between interfaces A and B, I store parameter C in vuex, and then use watch to listen to parameter C in both pages to execute getList() method. Then I found a problem. After entering page B from page A, if I reselect parameter C on page B, the getList() method of page A will also be executed. Vice versa, after going from page B to page A, if I change parameter C on page A, the getList() method of page B will also be executed.

Later I found out that it was because of the use of keep-alive. Keep-alive will always keep the Vue instance in memory, so the Vue instance always exists and the corresponding watchers are always effective. After searching for relevant information, I found that many people have encountered this problem. Finally, I found the following two solutions:

Solution 1

Determine whether to execute getList() by the router path

watch:
        someValue(newValue, oldValue) {
            if (this.$route.fullPath === 'A page routing path') {
                // do something
            }
        }
    }

Solution 2

Add a flag parameter to determine whether the page is in the active state. Components using keep-alive caching will only trigger activated and deactivated events, so set the flag to true and false when these two events are triggered. Only when the flag is true will getList() be executed.

{
  data () {
    return {
      activatedFlag: false
    };
  },
  watch:
    'someValue'(val) {
      if(val && this.activatedFlag) {
        this.getlist();
      }
    }
  },
  activated () {
    this.activatedFlag = true;
  },
  deactivated () {
    this.activatedFlag = false;
  }
}

If there are many pages and the function names in each page are inconsistent, you can remove the watch part of the above code and write it into a mixin, and then import it on the required page.

  import activeFlag from "@/mixin/activeFlag";

  export default {
    mixins: [activeFlag],
    watch:
        'someValue'(val) {
          if(val && this.activatedFlag) {
            this.getlistA();
            this.getlistB();
          }
        }
      },
  }

The above are the details of the two solutions to the problem of repeated triggering of functions in the vue project watch. For more information on the solution to repeated triggering of vue watch functions, please pay attention to other related articles on 123WORDPRESS.COM!