This is an automated email from the ASF dual-hosted git repository. rohit pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/cloudstack-primate.git
commit 19a3b025096749c36a660a1a41230ad4d5de4b42 Author: Rohit Yadav <[email protected]> AuthorDate: Mon Feb 10 14:57:31 2020 +0530 autogenview: fix duplicate API calls issue while navigating view The route config creates two groups of section components one for each related paths that are cache and reused. Once these two groups of components are mounted, on route change fetchData() is called twice by two of such cached components beloning to two groups of paths. This commit fixes this issue by using logical XOR to identify the current component against related `to` route and the path the component was in and only calls fetchData if `to` route and currentPath are of the same group of routes. Signed-off-by: Rohit Yadav <[email protected]> --- src/views/AutogenView.vue | 32 +++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue index 5baedfa..856eba6 100644 --- a/src/views/AutogenView.vue +++ b/src/views/AutogenView.vue @@ -308,14 +308,39 @@ export default { return this.selectedRowKeys.length > 0 } }, + beforeCreate () { + this.form = this.$form.createForm(this) + }, mounted () { + this.currentPath = this.$route.fullPath this.fetchData() }, + beforeRouteUpdate (to, from, next) { + this.currentPath = this.$route.fullPath + next() + }, + beforeRouteLeave (to, from, next) { + this.currentPath = this.$route.fullPath + next() + }, watch: { '$route' (to, from) { - if (to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) { - this.page = 1 + // The route config creates two groups of section components one for each + // related paths. Once these two groups of components are mounted, on + // route changes this method is called twice causing multiple API calls. + // The following fixes this issue by using logical XOR to identify the + // current component against related `to` route and the path the component + // was in and only calls fetchData if `to` route and currentPath are of + // the same group of routes. + + const related = ['/project', '/event', '/dashboard'] + const toPath = related.map(o => to.fullPath.includes(o)).includes(true) + const inPath = related.map(o => this.currentPath.includes(o)).includes(true) + this.needToFetchData = ((toPath ^ inPath) === 0) + if (this.needToFetchData && to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) { this.searchQuery = '' + this.page = 1 + this.itemCount = 0 this.fetchData() } }, @@ -325,9 +350,6 @@ export default { } } }, - beforeCreate () { - this.form = this.$form.createForm(this) - }, methods: { fetchData () { if (this.routeName !== this.$route.name) {
