vuex-request-tracker v1.0.0

vuex-request-tracker

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-request-tracker --save

Usage

Example

register package

import Vue from 'vue'
import store from './your/vuex-store/path'
import axios from 'your/axios-config/path'
import vuexRequestTracker from 'vuex-request-tracker'

Vue.use(vuexRequestTracker, { axios, store });
...

axios-config

import axios from 'axios'

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

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

export default instance;

vue component

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

options

You can define the vuex module namspace for the package with the 'vuexNamespace' key. Default namespace is 'vuexRequestTracker'.

Vue.use(vuexRequestTracker, { axios, store, vuexNamespace: 'your-namespace' });