Why do Vue put requests in services?

Question

Vue.js

Why do many people in vue js put requests in services, and then call the request in vuex actions, when you can just write it in actions?
We have vue.js, we have vuex. I began to notice that many make requests to the services directory .

For example, there is a User service:

import api from '../api' // Там axios

class UserService {
  async getById (id) {
    return await api.get('/user/', {
      params: {
        id
      }
    })
  }

  // Другие запросы с работой пользователя
}

export default UserService

We have vuex and its actions:

import UserService from '../services/UserService'

//...
export const actions = {
  async getUserById ({ commit }, id) {
    const { data } = await UserService.getById(id)

    commit('setUser', data)
  },
}
//...

The question is why all this? I have actions that work with requests
Why not write requests in it?
Why is this layer that essentially does nothing? Because all the examples that I have seen in my life are just function requests.

PS I came up with the code on the go, so please, in which case, do not pay attention to the syntax. I just wanted to convey the essence of my question with these examples.

Answer 1

1. To simplify the code. Let's say, in order not to write the whole construction every time, ala

   axios.get(ENDPOINT + '/api/' + API_METHOD, {
     params: {
       id
     }
   })
   .catch
   ...

   
   A wrapper is made, a conditional function getUser(id). It contains all the logic for working with a request, determining API routes, error handling, and so on. Only one function and parameter sticks out.
   
2. When working with TS, this is easier to type. It is much easier to describe the types of accepted parameters and the return type for several functions than to describe a generic construct for accessing any API methods.
   
3. And finally: the service can be called directly in the components. Calling API methods is not necessary inside Vuex. Even more often this should be done inside individual components, each of which works with one or two APIs, and not with the whole set.
   

Answer 2

Business logic should not be in components. And this is not even a specific case in VueJS, but in general, in general. They do the same in both Angular and React. The component should not know how the data is loaded specifically.

Answer 3

I will add to everything already listed - it is very convenient for testing . You can mock modules/methods and don't bother testing the real API.

Answer 4

I haven't worked with Vue.js, but it's very similar to the Redux implementation - separating application state, application view, and requests. In order not to directly change the state of the application, additional layers are created. Actions in this case is not only a request, but also a state change, and the same requests in theory can be used in different actions, which is why they are separated.