Steps for isolating AXIOS requests in a Vuex store

Question

Steps for isolating AXIOS requests in a Vuex store

My Vuex store file appears very typical and contains the following code:

//store.js
import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    loading: true,
    companyBasicInfo: [

    ]
  },
  mutations: {
    getCompanyBasicInfo: (state, res) => {
      state.companyBasicInfo.push(res);
    },
    changeLoadingStatue: (state, loading) => {
      state.loading = loading;
    }
  },
  actions: {
    getCompanyBasicInfo: context => {
// AXIOS REQUESTS GO HERE
    }
  }
});

The axios request in my getCompanyBasicInfo() action functions perfectly.

My Objective

I aim to separate my AXIOS requests into another file in order to streamline my store.js file.

My Attempt

To achieve this, I created a file named requests.js with the following content:

import axios from 'axios';

export default GET_COMPANY_DETAILS = () => {
  setTimeout(() => {
    axios.get('http://localhost:3000/companies/show/trade key egypt').then((res) => {
      context.commit('getCompanyBasicInfo', res.data);
      context.commit('changeLoadingStatue', false);
    }).catch(e => {
      console.log(e);
    });
  }, 3000);
};

Afterward, I attempted to import this file into my store.js file like so:

import requests from './requests';

Issue

However, I faced difficulty when trying to call requests.GET_COMPANY_DETAILS(); within the getCompanyBasicInfo() action. It seems that the method in the requests.js file cannot be accessed.

Error Notification

An error is displayed in the console stating

Uncaught ReferenceError: GET_COMPANY_DETAILS is not defined

.

javascript vue.js vuex

Answer 1

Answer №1

Issues with Exporting

When utilizing the

export default GET_COMPANY_DETAILS

, the import of requests will result in the GET_COMPANY_DETAILS function being imported.

This enables a direct call to requests().

Refer to the MDN documentation on export for more information on the various options available.

An Effective Method to Export an API

A correct approach to exporting an API should look like:

// api.js
import axios from 'axios';

// initialize an axios instance with default settings
const http = axios.create({ baseURL: 'http://localhost:3000/' });

export default {
    getCompanyDetails(tradeKey) {
        // return the promise of the axios instance
        return http.get(`companies/show/${tradeKey}`)
            .catch(err => {
                // handle errors if needed
                console.log(err);
            });
    },
    anotherEndpoint() {
        return http.get('other/endpoint');
    }
};

You can export a default API as demonstrated above, or even utilize both named and default exports.

export function getCompanyDetails(tradeKey){ /*...*/ }
export default { getCompanyDetails }

In your store implementation:

import api from './api';

// ...

actions: {
    getCompanyBasicInfo({ commit }, key) {
        // Remember to return the Promise within the action
        return api.getCompanyDetails(key).then(({ data }) => {
            commit('getCompanyBasicInfo', data);
            commit('changeLoadingStatus', false);
        });
    }
}

The store-related code needs to be located within your actions section.

Enhance Isolation Further

I have provided an answer containing examples of axios-middleware and axios-resource, which aid in creating modules with single responsibilities.

You can utilize middleware to manage errors, while concentrating on endpoint configuration within resource classes.

Answer 2

Issues with Exporting

When utilizing the

export default GET_COMPANY_DETAILS

, the import of requests will result in the GET_COMPANY_DETAILS function being imported.

This enables a direct call to requests().

Refer to the MDN documentation on export for more information on the various options available.

An Effective Method to Export an API

A correct approach to exporting an API should look like:

// api.js
import axios from 'axios';

// initialize an axios instance with default settings
const http = axios.create({ baseURL: 'http://localhost:3000/' });

export default {
    getCompanyDetails(tradeKey) {
        // return the promise of the axios instance
        return http.get(`companies/show/${tradeKey}`)
            .catch(err => {
                // handle errors if needed
                console.log(err);
            });
    },
    anotherEndpoint() {
        return http.get('other/endpoint');
    }
};

You can export a default API as demonstrated above, or even utilize both named and default exports.

export function getCompanyDetails(tradeKey){ /*...*/ }
export default { getCompanyDetails }

In your store implementation:

import api from './api';

// ...

actions: {
    getCompanyBasicInfo({ commit }, key) {
        // Remember to return the Promise within the action
        return api.getCompanyDetails(key).then(({ data }) => {
            commit('getCompanyBasicInfo', data);
            commit('changeLoadingStatus', false);
        });
    }
}

The store-related code needs to be located within your actions section.

Enhance Isolation Further

I have provided an answer containing examples of axios-middleware and axios-resource, which aid in creating modules with single responsibilities.

You can utilize middleware to manage errors, while concentrating on endpoint configuration within resource classes.

Answer 3

Answer №2

To enhance the organization of your code, I recommend structuring it based on the recommended application structure outlined in Vuex documentation.

This approach will promote a clear separation of concerns and help to keep your store.js file concise and efficient.

Consider exporting functions individually instead of using default exports. This will allow you flexibility in exporting multiple functions from a single file like requests.js.

For example:

import axios from 'axios';

export function getCompanyDetails() {
  setTimeout(() => {
    axios.get('http://localhost:3000/companies/show/trade key egypt').then((res) => {
      context.commit('getCompanyBasicInfo', res.data);
      context.commit('changeLoadingStatue', false);
    }).catch(e => {
      console.log(e);
    });
  }, 3000);
};

export function someOtherApiMethod() {}

Instead of utilizing setTimeout within GET_COMPANY_DETAILS, consider returning the promise directly from Axios.

For instance:

 export function getCompanyDetails() {
    return axios
        .get('http://localhost:3000/companies/show/trade key egypt')
        .then(res => res.data)
};

Subsequently, integrate this promise into your action logic:

import { getCompanyDetails } from './requests';

actions: {
    getCompanyBasicInfo: context => {
        getCompanyDetails().then(() => {
            // implement mutations
        });
    }
  }

Answer 4

To enhance the organization of your code, I recommend structuring it based on the recommended application structure outlined in Vuex documentation.

This approach will promote a clear separation of concerns and help to keep your store.js file concise and efficient.

Consider exporting functions individually instead of using default exports. This will allow you flexibility in exporting multiple functions from a single file like requests.js.

For example:

import axios from 'axios';

export function getCompanyDetails() {
  setTimeout(() => {
    axios.get('http://localhost:3000/companies/show/trade key egypt').then((res) => {
      context.commit('getCompanyBasicInfo', res.data);
      context.commit('changeLoadingStatue', false);
    }).catch(e => {
      console.log(e);
    });
  }, 3000);
};

export function someOtherApiMethod() {}

Instead of utilizing setTimeout within GET_COMPANY_DETAILS, consider returning the promise directly from Axios.

For instance:

 export function getCompanyDetails() {
    return axios
        .get('http://localhost:3000/companies/show/trade key egypt')
        .then(res => res.data)
};

Subsequently, integrate this promise into your action logic:

import { getCompanyDetails } from './requests';

actions: {
    getCompanyBasicInfo: context => {
        getCompanyDetails().then(() => {
            // implement mutations
        });
    }
  }

Steps for isolating AXIOS requests in a Vuex store

My Objective

My Attempt

Issue

Error Notification

Answer №1

Issues with Exporting

An Effective Method to Export an API

Enhance Isolation Further

Answer №2

Similar questions

What ways can I leverage JavaScript to convert a provided array into multiple different arrays?

Guide on testing Vue prop updates with Jest

You cannot add properties to an object within an async function

Is there a way to incorporate a fade-in effect when I trigger the expand function in this script?

Condition in SQL for searching full name with no specific order of first name or last name

Error in Layout of Navigation Panel and Tabbed Pages

Troubleshooting: jQuery's append function does not seem to be functioning properly when trying

What is the best way to experiment with angular-ui-tinymce within a tabset using Plunker?

Is the alias name absolute or converted to AliasId when establishing a connection with Sequelize and Migrations?

An error stating 'THREE.OBJLoader is not a constructor' has occurred, along with an 'Unexpected token {' message in OBJLoader and OrbitControls

What is the best way to retrieve subreddit comments from a post using JavaScript?

How do I incorporate global typings when adding type definitions to an npm module?

The execution of the code may encounter errors initially, but it generally runs without any issues on subsequent attempts

Executing the command "node <app name>" does not result in any action

Validating Range Constraints

The Django project does not contain any JS script

The variable fails to receive the AJAX response

Refreshing the page reveals the complete local storage object

Guide to dynamically setting the title and background color of the navigation bar in React Navigation 5

Iterating through a JSON object to verify the presence of a specific value