vuex-track-pending-request v1.0.3

vuex-track-pending-request

Generate a vuex module to track async requests 'pending' status.

When you send a request to one of the registered endpoints or receive a response from one of them, this package set the proper 'pending' state value through axios interceptors.

Installation

npm i vuex-track-pending-request --save

Usage

Example

register package

import vuexTrackPendingRequestInstall from 'vuex-track-pending-request'
import axios from 'your/axios-config/path'

const store = new Vuex.Store({ 
    modules: {
      //your store modules
    }
});

//You need to install the package with your axios and vuex store instances.
//Optionally you can define the desired store namspace it should use (default is 'vuexTrackPendingRequest').
vuexTrackPendingRequestInstall({axios, store, /* 'desiredStoreNamesapce' */});

export default store;

axios-config

import axios from 'axios'

const instance = axios.create({
    //your config
});

//You need to add a 'vuexTrackPendingRequestEndpoints' property to your 
//axios instance, which needs to be an array of endpoints you would like to track.
instance.vuexTrackPendingRequestEndpoints = [
     '/your/endpoint'
];

export default instance;

vue component

...
computed: {
    isRequest1Pending() {
        return this.$store.getters['vuexTrackPendingRequest/yourEndpoint']();
    },
}
...