Vue.js Axios Request Aborted When Calling Multiple Vuex Actions Sequentially

Question

I'm working on a Vue.js application using Vuex for state management. I encountered an issue where a network request gets aborted when I sequentially call two Vuex actions. Here’s what I’ve observed:

If I call the fetchMenuItems action directly before the login action, everything works fine. However, if I remove the direct call and instead call fetchMenuItems after login or after login method, the request gets aborted.

Interestingly, if I try the same request again, it succeeds without any issues

const actions = {
async login({ commit }, payload) {
    try {
        const user = await AuthenticationService.login(payload.email, payload.password);
        commit('loginSuccess', user);
        return user;
    } catch (error) {
        commit('loginFailure', error);
        throw error;
    }
},
async fetchMenuItems({ commit }, { cancelToken }) {
    try {
        var items = await AuthenticationService.getMenuItems(cancelToken);
        commit('setMenuItems', items);
        return items;
    } catch (error) {
        console.error('Failed to fetch menu items:', error);
        throw error;
    }
  },
// Other actions...
};

Here's how I’m calling these Vuex actions from my component:

      <v-form class="signup-form-form" @submit.prevent="login" ref="form">
   <div class="text-center ma-6">
                <v-btn
                  class="form-button pa-0"
                  type="submit"
                  :loading="loading"
                  >
                    {{ $t('l_user.login') }}
                   </v-btn>
                 </div>
...

async login() {
if (this.$refs.form.validate()) {
    this.loading = true;
    try {
        // First call to Vuex action
        const response = await this.$store.dispatch('authentication/login', {
            email: this.email,
            password: this.password,
        });

        // Second call to Vuex action
        console.log('Fetching menu items...');
        const items = await this.$store.dispatch('authentication/fetchMenuItems');
    } catch (error) {
        this.loading = false;
        console.error('Error during login or fetching menu items:', error);
    } finally {
        this.loading = false;
    }
}

What I've Tried: Adding more detailed logging to track when each action is called and completes. Using cancelToken to handle request cancellation explicitly, but the issue persists even without this. Ensuring that no other part of the code is making conflicting changes to state or navigating away.

I want to understand why the request might be aborted in the sequence shown above and how I can prevent this issue. Is there something I’m missing in managing the state or handling asynchronous calls that could cause one request to abort another?