vuex-cache-plugin
v1.0.2
Published
Simplest Cache Pulgin for Vuex
Downloads
49
Readme
Vuex Cache Plugin
🔋 Simplest Cache Plugin for Vuex
Install
npm install --save vuex-cache-plugin
Usage
import Vue from 'vue';
import Vuex from 'vuex';
import VuexCachePlugin from 'vuex-cache-plugin'
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
...
},
plugins: [VuexCachePlugin(TIME_EXPIRATION_CONFIG)],
});
Now you can pass an extra parameter to any dispatch action (be sure to pass OPTIONS as the latest parameter):
this.$store.dispatch('user/FETCH_USERS', OPTIONS);
TIME_EXPIRATION_CONFIG
TIME_EXPIRATION_CONFIG: default duration (in millis) for the cache before get expired [Type: number, optional - Default: 30000]
OPTIONS
{
enableVuexCachePlugin: set to TRUE to enable the cache plugin for the current dispatch [Type: boolean, optional - Default: FALSE]
clearAllCache: set to TRUE to clear all cache before the current dispatch [Type: boolean, optional - Default: FALSE]
forceRefreshCache: set to TRUE to refresh the current cache for the current dispatch [Type: boolean, optional - Default: FALSE]
timeExpiration: custom TIME_EXPIRATION for the current dispatch (in millis) [Type: boolean, optional - Default: TIME_EXPIRATION_CONFIG]
}
Example
- Import vuex-cache-plugin
import Vue from 'vue';
import Vuex from 'vuex';
import VuexCachePlugin from 'vuex-cache-plugin'
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
...
},
plugins: [VuexCachePlugin()],
});
- Dispatch actions in your Vue components
this.$store.dispatch('user/FETCH_USERS'); // This dispatch won't be saved in cache
...
this.$store.dispatch('user/FETCH_USERS', {
enableVuexCachePlugin: true,
}); // This dispatch will be saved in cache for 30000 millis
...
this.$store.dispatch('user/FETCH_USERS', {
enableVuexCachePlugin: true,
timeExpiration: 60000
}); // This dispatch will be saved in cache for 60000 millis
...
this.$store.dispatch('user/FETCH_USERS', {
enableVuexCachePlugin: true,
forceRefreshCache: true
}); // This dispatch will be executed despite been saved in cache recently (the new result will override the current cache)