Effortlessly handle api calls with vuex without repeating yourself.
npm install vuex-api
vuex-api is a library that wants to help you handle API as easily as possible. Yes, that's it !
1. Make sure you have vuex set up in your app.
2. In your store.js, install the vuex-api module:
``javascript
import vuexApi from 'vuex-api'
export default new Vuex.Store({
modules: {
vuexApi,
},
})
`
This library allows you multiple way to make and consume API calls. Here is an exemple of one of them:
`javascript`
created: function () {
this.vuexApiCall(
{
baseURL: 'https://jsonplaceholder.typicode.com',
url: 'posts',
keyPath: ['typicode', 'posts'] // is the to reach the data in your vuex state
}
)
},
`html`
// Render components based on the status of the API call. The component will have the api call status injected in their props automatically
You can do API calls for anything:
- getting a blog post
- create a recipe
- delete a user
However, API calls are a pretty repetitive when you think about it.
1. Emit the API call
2. Display loading (or not)
3. Receive Data
4. Display Data (or error)
5. Maybe as consequence execute custom code
This Library goals is to abstract this repetition from you. You only need to give the necessary data to perform the API call and that's it. The library will:
- Handle the whole api call from loading to success and error
- Give you mixins and HOC to help you make and retrieve API calls.
Vuex-api is nothing but a vuex module. It listen to a certain action, with a payload that will be used to perform the API Call. Then it will store the different states of the response in the vuex state.
Because we have all the logic handled at one place, we can add tooling around that will help us reduce the pain to handle api calls.
This doc is split in 2 parts.
-> Sending API calls
-> Retrieve API call data
Emitting an API call will always require you to send the info necessary to perform the api request.
`
baseURL: 'https://jsonplaceholder.typicode.com'
method: 'GET'
url: 'posts'
keyPath: ['article', 'slugId'] // the only attribute not shapped in the axios request object. I will define the path where the api call states will be stored in vuex.
The following are 3 independant methods to emit the same API call.
To emit a vuex-API call you need to fire an action with the following data:
`javascript
import { actions } from 'vuex-api'
created: function(){
this.$store.dispatch(actions.request,{
baseURL: 'https://jsonplaceholder.typicode.com',
url: 'posts',
keyPath: ['typicode', 'posts']
}
)
},
`
`
mixins:[
vuexApiCallMixin,
],
vuexApiCallMixin exposes to the vue component 2 methods:
- vuexApiCall(VuexApiRequestObject) Perform an API call using the passed VuexApiRequestObjectvuexApiClear(keyPath)
- Clears the state at the given keypath
`javascript`
created: function () {
this.vuexApiCall(
{
baseURL: 'https://jsonplaceholder.typicode.com',
url: 'posts',
keyPath: ['typicode', 'posts']
}
)
},
This one is mostly suited for GET calls. It's a pretty powerfull way to handle GET calls in a breaze.
`javascript`
Vue.component('json-api', ApiHandlerComponent({
requestConfig: { baseURL: 'https://jsonplaceholder.typicode.com' }
}))
`html`
You can get the data related to your API call directly from the vuex state as you would do normally
`javascript
this.$store.state.vuexApi.popular.feed
// or
computed: mapState({
data = state => state.vuexApi.popular.feed
})
`
vuexApiGetStateMixin(keyPath, attributeName?) exposes to the vue component a computed value representing the state at the given keyPath under this[attributeName].
This hoc will render the given child component depending on the status ate of the API Call. More over it will auto inject the api call response to the children in its props.
`html``