js-vue-cache
Cache dispatched actions and prevent repeated requests and heavy actions.
Compatibility
Map
andPromise
are required (you can use polyfills, like@babel/polyfill
);- Any Vue version, since
vuex-cache
just deals with Vuex; - Vuex versions 1, 2 and 3.
Installation
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-cache
Import createCache
factory and use on Vuex
's plugins.
;;; const store = plugins: ...;
Nuxt.js
Installation onOnly 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
; { const options = timeout: 2 * 60 * 60 * 1000 // Equal to 2 hours in milliseconds. ; const setupVuexCache = ; window;};
Then just add this plugin to your nuxt configuration. Like the example below.
~/nuxt.config.js
moduleexports = ... plugins: ... src: '~/plugins/vuex-cache.js' ssr: false ;
Usage
After install you can use cache
property to call cache methods.
const store = ... actions: 'FETCH_USER': async { const response = await ; const users = await response; return users; } ; storecache;//=> Promise { User }
API
createCache
The default exported factory to create Vuex
's store plugin. It define cache
property on Store instances.
;; const store = plugins:
cacheAction
A named exported function to enhance actions and define cache
property on ActionContext instances.
; // ... const actions = 'FETCH_STARGAZERS': { ... }
store.cache.dispatch
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.
storecache;//=> Promise { User } // Returns value without dispatching the action again.storecache;//=> Promise { User }
store.cache.has
Check if an action is cached. Returns true
if action is cached and false
otherwise.
storecache;//=> true storecache;//=> false
store.cache.delete
Delete an action from cache. Returns true
if action is deleted and false
otherwise.
storecache;//=> true storecache;//=> false
store.cache.clear
Clear the cache, delete all actions from it. Returns true
if cache is cleared and false
otherwise.
storecacheclear;//=> true
mapCacheActions
Create component methods that dispatch a cached action.
; name: 'Users' methods: ... ... async { this; this; }
Payload
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.
storecache;//=> Promise { Repository } storecache;//=> true storecache;//=> true
Timeout
timeout
option is 0
as default and define cache duration is milliseconds.
0
means it has no defined duration, no timeout.
const store = plugins: ...;
After milliseconds defined in timeout option an action is expired from cache.
// This dispatches the action and set it on cache.storecache;//=> Promise { Repository } storecache;//=> true
Store's timeout can be overwritten by dispatch timeout option in Dispatch Options or in payload.
storecache; // OR storecache;