1.0.5 • Published 5 years ago
vuexios v1.0.5
vuexios
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 --save
Usage
Example
register package
import Vue from 'vue'
import store from './your/vuex-store/path'
import axios from 'your/axios-config/path'
import vuexios from 'vuexios'
let endpoints = ['/your/endpoint', '/your/second-endpoint', '/your/third-endpoint'];
Vue.use(vuexios, { axios, store, endpoints });
...
vue component
...
computed: {
isYourRequestPending() {
return this.$store.getters['vuexios/your:endpoint']();
},
isYourSecondRequestPending() {
return this.$store.getters['vuexios/your:secondEndpoint']();
},
isYourThirdRequestPending() {
return this.$store.getters['vuexios/your:thirdEndpoint']();
},
}
...
Options
1. Vuex namspace
You can define the vuex module namspace for the package with the 'vuexNamespace' key. Default namespace is 'vuexios'.
Vue.use(vuexios, { 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).