vuexios-request-tracker v1.0.4

vuexios-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 vuexios-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 vuexiosRequestTracker from 'vuexios-request-tracker'

let endpoints = ['/your/endpoint', '/your/second-endpoint', '/your/third-endpoint'];

Vue.use(vuexiosRequestTracker, { axios, store, endpoints });
...

vue component

...
computed: {
    isYourRequestPending() {
        return this.$store.getters['vuexiosRequestTracker/your:endpoint']();
    },
    isYourSecondRequestPending() {
        return this.$store.getters['vuexiosRequestTracker/your:secondEndpoint']();
    },
    isYourThirdRequestPending() {
        return this.$store.getters['vuexiosRequestTracker/your:thirdEndpoint']();
    },
}
...

Options

1. Vuex namspace

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

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

2. Endpoints

You can define the endpoint collection with an obejct:

let endpoints = {
    yourRequestName: '/your/endpoint',
    yourGroup: {
        yourGroupRequestName1: '/your/second-endpoint',
        yourGroupRequestName2: '/your/third-endpoint',
    }
};

Store names will be generated from the urls directly, not from the object key names (just like with the array version).