@netsells/vuex-rest-api-cache
v3.0.2
Published
Vuex Rest API action creator and cacher
Downloads
70
Keywords
Readme
Vuex Rest API Cache
Vuex Rest API action creator and model cacher
This module makes it easier to create Vuex store actions, mutators, getters and state for communicating with rest APIs.
Installation
yarn add @netsells/vuex-rest-api-cache
Setup
import Vuex from 'vuex';
import Vrac from 'vuex-rest-api-cache';
const modules = Vrac.createModules({
posts: {
baseUrl: `${ API_URL }/posts`,
children: {
comments: {
baseUrl: `${ API_URL }/posts/:post_id/comments`
},
},
},
});
const store = new Vuex.Store({ modules });
Documentation
Documentation is available here
Quick Usage
This includes usage examples for root models (e.g. /api/v1/posts
) and for child models (e.g. /api/v1/posts/:post_id/comments
)
Index
Get a list of models from the API. Will cache each model. Will always create a new API request instead of using the cache.
const posts = await this.$store.dispatch('posts/index');
const comments = await this.$store.dispatch('posts/comments/index', {
fields: {
post_id: 1,
},
});
Create
Create a model. Will cache the model returned by the API. Will always create a new API request.
const post = await this.$store.dispatch('posts/create', {
fields: {
text: 'Foo bar',
},
});
const comment = await this.$store.dispatch('posts/comments/create', {
fields: {
post_id: post.id,
message: 'Foo bar',
},
});
Read
Read a model. Will cache the model returned by the API. Will always use a cached model over reading from the API.
const post = await this.$store.dispatch('posts/read', {
fields: {
id: 45,
},
});
const comment = await this.$store.dispatch('posts/comments/read', {
fields: {
post_id: post.id,
id: 3,
},
});
Update
Update a model. Will cache the model returned by the API. Will always create a new API request.
const post = await this.$store.dispatch('posts/update', {
fields: {
id: 45,
text: 'Bar foo',
},
});
const comment = await this.$store.dispatch('posts/comments/update', {
fields: {
post_id: post.id,
id: 3,
message: 'Hello world',
},
});
Destroy
Destroy a model. Will remove the model from the cache. Will always create a new API request.
await this.$store.dispatch('posts/destroy', {
fields: {
id: 45,
},
});
await this.$store.dispatch('posts/comments/destroy', {
fields: {
post_id: post.id,
id: 3,
},
});
Changing the HTTP Requests
Vrac sends all HTTP requests through Vrac.requestAdapter
. By default, this
passes the params straight through to axios.request
. By overriding this
function, you can either modify the request (e.g. to add authorization headers)
or use a completely different HTTP library.
Vrac.requestAdapter = function(requestParams) {
return axios.request(requestParams);
};