How to properly write and store Vue.js modules used in a project?

Question

Vue.js

There is a Vuex data store in which I have an action that makes a request to a third-party api, returns data and launches a callback function, but it seems to me that this whole action is rather cumbersome (all code is taken from the api developer's website) and extremely inconvenient in terms of the logic of a particular storage module (this method is not at ease). Since this method (action) will need to be used in several components, with different input parameters, I decided to put it in a separate module and use it like this: so that later I can work with it like this:import exampleapi from 'example-api';

exampleapi.query('{}',function(data){
  //some actions
})

I found examples of how modules are written, came across this:

// lib/counter.js

var counter = 1;

function increment() {
  counter++;
}

function decrement() {
  counter--;
}

module.exports = {
  counter: counter,
  increment: increment,
  decrement: decrement
};


// src/main.js

var counter = require('../../lib/counter');

counter.increment();
console.log(counter.counter); // 1

In the same form, in fact, I describe my VUEX storage modules. The structure is like this:

-store
|--modules
|----invites.js
|----user.js
|--index.js

How correct would it be to add a new module here, in which methods for working with api, and not with storage, will be described? It seems to me that this approach is not correct, because only modules for working with the repository are stored in the store folder. Then where can you store your self-written modules? Am I moving in the right direction?

Answer 1

You can move the work with this api into a separate service and use it directly in the repository