Encountered a weird issue,
While inspecting the network tab in Chrome devtools, I noticed that my Vue app is making double requests to the same endpoint :/
Here's a snippet of my code: In the router section, I have a beforeEach function. When I navigate to /account/projects, it triggers a dispatch from my Vuex store to fetch data from the server:
function fetchProjects() {
store.dispatch("getProjects");
store.dispatch("getFavoriteProjects");
}
router.beforeEach((to, from, next) => {
// Check if authenticated
if(to.meta.authenticated) {
if(authenticated()) {
if(to.path == "/account/projects" || to.path == "/account") {
fetchProjects();
}
store.dispatch("updateUserData").then(() => {
next();
});
} else {
// Redirect to login page if not authenticated
next("/auth/login");
}
} else {
next();
}
})
In routes, I've defined the following:
{
path: "/account/projects",
component: () => import("@/views/account/Projects.vue"),
meta: {
showProgressBar: true,
authenticated: true
},
}
And in the component:
computed: {
projects() {
return this.$store.getters.getProjects;
},
favoriteProjects() {
return this.$store.getters.getFavoriteProjects;
},
}
In the network tab of Chrome devtools, I observed this behavior:
It seems like my application is sending repeated requests after the initial ones. Any idea why this could be happening?
Appreciate any assistance!