How do you perform asynchronous operations?

In Vue application architecture, asynchronous operations (such as API data fetching, asynchronous imports, or timer delays) are handled differently depending on whether you use the modern Pinia store, Vuex, or the Composition API:

### 1. In Modern Pinia (Recommended):
Actions can be directly declared as async functions with no distinction between synchronous mutations and asynchronous actions:

export const useUserStore = defineStore('user', {
  state: () => ({ user: null, loading: false }),
  actions: {
    async fetchUser(id: number) {
      this.loading = true;
      try {
        this.user = await api.getUser(id);
      } finally {
        this.loading = false;
      }
    }
  }
});

### 2. In Vuex:
Vuex strictly requires mutations to be synchronous to ensure DevTools state snapshots remain deterministic. Asynchronous logic must reside inside Actions, which commit mutations once resolved:

actions: {
  async fetchUserData({ commit }, userId) {
    commit('SET_LOADING', true);
    const data = await api.getUser(userId);
    commit('SET_USER', data);
    commit('SET_LOADING', false);
  }
}

### 3. In Components (Composition API):
Perform async calls inside lifecycle hooks like onMounted() or using <Suspense> wrappers.