Cache dispatched actions and prevent repeated requests and heavy actions.
MapandPromiseare required (you can use polyfills, like@babel/polyfill);- Any Vue version, since
vuex-cachejust deals with Vuex; - Vuex versions 1, 2 and 3.
vuex-cache is published in the NPM registry and can be installed using any compatible package manager.
npm install vuex-cache --save
# For Yarn use the command below.
yarn add vuex-cacheImport createCache factory and use on Vuex's plugins.
import Vue from 'vue';
import Vuex, { Store } from 'vuex';
import createCache from 'vuex-cache';
const store = new Store({
plugins: [createCache()],
...
});Installation on Nuxt.js
Only use it if you're not using Classic Mode.
Create a module on plugins to setup vuex-cache. Call vuex-cache with your options, then call returned value with store on onNuxtReady event.
~/plugins/vuex-cache.js
import createVuexCache from 'vuex-cache';
export default ({ store }) => {
const options = {
timeout: 2 * 60 * 60 * 1000 // Equal to 2 hours in milliseconds.
};
const setupVuexCache = createVuexCache(options);
window.onNuxtReady(() => setupVuexCache(store));
};Then just add this plugin to your nuxt configuration. Like the example below.
~/nuxt.config.js
module.exports = {
...,
plugins: [
...,
{ src: '~/plugins/vuex-cache.js', ssr: false },
]
};import createCache from 'vuex-cache';
export const plugins = [
createCache()
]After install you can use cache property to call cache methods.
const store = new Store({
...,
actions: {
'FETCH_USER': async (_, id) => {
const response = await fetch(baseURL + '/user/' + id);
const { users } = await response.json();
return users;
}
}
});
store.cache.dispatch('FETCH_USER', 1);
//=> Promise { User }The default exported factory to create Vuex's store plugin. It define cache property on Store instances.
import { Store } from 'vuex';
import createCache from 'vuex-cache';
const store = new Store({
plugins: [
createCache()
]
})A named exported function to enhance actions and define cache property on ActionContext instances.
import { cacheAction } from 'vuex-cache';
// ...
const actions = {
'FETCH_STARGAZERS': cacheAction(
({ cache, commit }, payload) => (
cache.dispatch('FETCH_REPOSITORIES')
.then((repos) => Promise.all(repos.map(getStargazers)))
.then((stargazers) => {
commit('STARGAZERS', [].concat(...stargazers));
})
)
),
'SET_STARGAZERS': (context, payload) => { ... }
}Dispatches an action if it's not cached and set it on cache, otherwise it returns cached Promise.
It uses action name and payload as cache key.
store.cache.dispatch('user/GET_USER');
//=> Promise { User }
// Returns value without dispatching the action again.
store.cache.dispatch('user/GET_USER');
//=> Promise { User }Check if an action is cached. Returns true if action is cached and false otherwise.
store.cache.has('user/GET_USER');
//=> true
store.cache.has('FETCH_REPOSITORY', 219);
//=> falseDelete an action from cache. Returns true if action is deleted and false otherwise.
store.cache.delete('user/GET_USER');
//=> true
store.cache.delete('FETCH_REPOSITORY', 219);
//=> falseOnly exact matches are deleted. Use
store.cache.clearto delete all items or by action name.
Clear the cache, delete all actions from it. Returns true if cache is cleared and false otherwise.
store.cache.clear();
//=> trueIf using the type parameter, only actions with the specified type are deleted from cache and the number of deleted keys is returned.
// store.cache.dispatch('FETCH_REPOSITORIES', { page: 1 });
// store.cache.dispatch('FETCH_REPOSITORIES', { page: 2 });
store.cache.clear('FETCH_REPOSITORIES');
//=> 2Warning! Don't use this method in production.
Helper method for debugging. Prints the current value of the cache (state).
store.cache.dispatch('FETCH_REPOSITORIES', { page: 1 });
store.cache.dispatch('FETCH_REPOSITORIES', { page: 2 });
store.cache.state();
//=> Map(2){...}Create component methods that dispatch a cached action.
import { mapCacheActions } from 'vuex-cache';
export default {
name: 'Users',
methods: {
...mapCacheActions(['FETCH_REPOSITORY']),
...mapCacheActions('user', ['GET_USER']),
},
async mounted() {
this.GET_USER();
this.FETCH_REPOSITORY(219, {
timeout: 30000
});
}
}The payload value is undefined as default and supports functions, primitive values and JSON parseable objects.
store.cache.dispatch, store.cache.has and store.cache.delete supports payload object as argument.
store.cache.dispatch({
type: 'FETCH_REPOSITORY',
payload: 198
});
//=> Promise { Repository }
store.cache.has({
type: 'FETCH_REPOSITORY',
payload: 198
});
//=> true
store.cache.delete({
type: 'FETCH_REPOSITORY',
payload: 198
});
//=> truetimeout option is 0 as default and define cache duration is milliseconds.
0means it has no defined duration, no timeout.
const store = new Store({
plugins: [
createCache({ timeout: 10000 })
],
...
});After milliseconds defined in timeout option an action is expired from cache.
// This dispatches the action and set it on cache.
store.cache.dispatch('FETCH_REPOSITORY', 219);
//=> Promise { Repository }
store.cache.has('FETCH_REPOSITORY', 219);
//=> true
setTimeout(() => {
// It returns false because the action is expired.
store.cache.has('FETCH_REPOSITORY', 219);
//=> false
// This dispatches the action again because the action is expired.
store.cache.dispatch('FETCH_REPOSITORY', 219);
//=> Promise { Repository }
}, 10000)Store's timeout can be overwritten by dispatch timeout option in Dispatch Options or in payload.
store.cache.dispatch('FETCH_REPOSITORY', 219, {
timeout: 30000
});
// OR
store.cache.dispatch({
type: 'FETCH_REPOSITORY',
payload: 219,
timeout: 30000
});