Organizing API Calls in a Vue.js Application - Vuex Actions or a Service Class?

Question

Vue.js

I've always put API calls in Vuex actions, but I thought about a different approach - to organize API calls in custom service classes - one class for each entity, where each API call is a static function returning a promise. Then in the components there is a reversal of the form:

<EntityName>.<methodName>
  .then((res) => {})
  ...

Conceptually something like resources in Laravel. In my opinion, the Vuex approach provides a good state-action-mutation type structure. However, one argument in favor of using classes did cross my mind. It consists in the following: in the state, actions and mutations of Vuex there should be only logic that is used / will be used in several places in the application, because Vuex was created for this - to centralize data. All other calls to the API, which involve only private use, should be moved to service classes (or resources, whatever) so as not to clutter up either the SFC codebase or the shared repository.
I would like to hear the opinion of more experienced colleagues. Thank you.

Answer 1

Check out this article, I liked the approach
https://medium.com/canariasjs/vue-api-calls-in-as...