Should api calls be moved to a separate file?

Question

Vue.js

Greetings.
I look at the basket example from vuex, which is advised as the correct action structure, they moved the api to a separate file and then it is accessed from the actions .
Do you think such a skeleton action for working with the API (database) is worth using?
In fact, what we have achieved here is:
- we cleared the actions from the infrastructure (api calls), leaving only business logic in them.
- we do changes (mutations) in the state after a successful response from api
- is there error handling
- or are there other pluses?
You can already check with my real code if I am doing everything correctly according to the approach above?, where I have a list of cities, here is the code that controls them:
api/city.js

import axios from 'axios'

export default {
    async fetchAllCities(cb, errorCb = null) {
        await axios.get('http://localhost:3000/cities')
        .then((response) => {
            cb(response.data);
          })
          .catch(function (error) {
              if (errorCb) {
                errorCb(error);
              }
          });
    },
    async addCity(id, name, cb, errorCb = null) {
        await axios.post('http://localhost:3000/cities', {
            country_id: 1,
            id: id,
            name: name
        })
        .then((response) => {
            cb(response.data);
          })
          .catch(function (error) {
              if (errorCb) {
                errorCb(error);
              }
          });
    },
    async deleteCity(id, cb, errorCb = null) {
        await axios.delete('http://localhost:3000/cities/' + id )
        .then(() => {
            cb();
          })
          .catch(function (error) {
              if (errorCb) {
                errorCb(error);
              }
          });
    },    
    async updateCity(id, newName, cb, errorCb = null) {
        await  axios.put('http://localhost:3000/cities/' + id, {
            country_id: 1,
            name: newName
        })
        .then((response) => {
            cb(response.data);
          })
          .catch(function (error) {
              if (errorCb) {
                errorCb(error);
              }
          });
    },         
}

store/index.js

import city from '../api/city'

export default new Vuex.Store({
  strict: true,
  state: {
    cities: []
  },
  mutations: {
    SET_CITIES(state, payload) {
      state.cities = payload;
    },
    ADD_CITY(state, payload) {
      state.cities.push(payload);
    },
    DELETE_LAST_CITY(state) {
      state.cities.pop();
    },  
    UPDATE_LAST_CITY(state, payload) {
      let ind = state.cities.length - 1;
      Vue.set(state.cities, ind, payload);
    },      
  },
  getters: {
    cities: (state) => {
      return state.cities;
    },
  },
actions: {
    async fetchAllCities(context) {
      await city.fetchAllCities(
        cities => {
          context.commit('SET_CITIES', cities);
        },
        error => console.log('Fetch cities error: ' + error)
      );
    },  
    async addCity(context, name) {
      let lastId = context.getters.cities[context.getters.cities.length -1].id;
      await city.addCity(lastId + 1, name,
        (city) => {
          context.commit('ADD_CITY', city);
        },
        error => console.log('Addition error:' + error)
      );  
    }, 
    async deleteLastCity(context) {
      let lastId = context.getters.cities[context.getters.cities.length -1].id;
      await city.deleteCity(lastId,
        () => {
          context.commit('DELETE_LAST_CITY');
        },
        error => console.log('Deletion error: ' + error)
      );
    },  
    async updateLastCity(context, newName) {
      let lastId = context.getters.cities[context.getters.cities.length -1].id;
      await city.updateCity(lastId, newName,
        (city) => {
          context.commit('UPDATE_LAST_CITY', city);
        },
        error => console.log('Updation error: ' + error)
      );
    },      
  },

Answer 1

In life, this greatly facilitates testing. Well, adding new data providers (which is rare, but it happens).