vuex-cache

vuex-cache

Cache dispatched actions and prevent repeated requests and heavy actions.

Compatibility

• Map and Promise 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.

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 },
  ]
};

Usage

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 }

API

createCache

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()
  ]
})

cacheAction

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) => { ... }
}

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.

store.cache.dispatch('user/GET_USER');
//=> Promise { User }

// Returns value without dispatching the action again.
store.cache.dispatch('user/GET_USER');
//=> Promise { User }

store.cache.has

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);
//=> false

store.cache.delete

Delete 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);
//=> false

store.cache.clear

Clear the cache, delete all actions from it. Returns true if cache is cleared and false otherwise.

store.cache.clear();
//=> true

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.

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
});
//=> 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 = 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
});

Changelog

3.0.0

• Breaking Change: Module exports a factory to create plugin instead of the plugin itself.

  import Vue from 'vue'
  import Vuex, { Store } from 'vuex'
  import createCache from 'vuex-cache'
  
  Vue.use(Vuex)
  
  const store = new Store({
    plugins: [createCache()],
    ...
  })
  

• Breaking Change: store.cache.has() returns false for expired actions.

  const store = new Store({
    plugins: [createCache()],
    actions: {
      ACTION: () => {},
    },
  })
  
  store.cache.has('ACTION')
  //=> false
  
  store.cache.dispatch('ACTION', undefined, {
    timeout: 100,
  })
  
  store.cache.has('ACTION')
  //=> true
  
  setTimeout(() => {
    store.cache.has('ACTION')
    //=> false
  }, 100)
  

  This fixes issue #28.

• Breaking Change: Cache is module scoped and don't support multiple instances anymore.

  This fixes an issue with cacheAction cache state different from plugin one.

• Breaking Change: createCache returns

  This fixes an issue with cacheAction cache state different from plugin one.

• Breaking Change: Rename main source module and bundles.

  • Main module index.js is now vuex-cache.js
  • CommonJS bundle dist/vuex-cache.cjs.js is now dist/vuex-cache.js
  • ESM bundle dist/vuex-cache.es.js is now dist/vuex-cache.mjs
  • UMD bundle dist/vuex-cache.js is now dist/vuex-cache.umd.js
  • UMD minified bundle dist/vuex-cache.min.js is now dist/vuex-cache.umd.min.js

• It now supports some of non JSON parseable values as arguments. Like functions, undefined and other values.

  This fixes issue #30.

• It fallback dispatches to uncached if params have circular references.

  This fixes issue #29.

• Add JSDoc comments to functions and values.

• Rename main module, functions and variables.

• Refactor unit tests and split them into multiple modules.

• Upgrade dependencies and bundle settings.

• Create type definitions for TS developers & Editor/IDE intellisense.

  This fixes issue #32.

• Add MIT License.

• Improve README.md docs.

  This fixes issue #21.

  • Add Installation on Nuxt.js section to README.md.

    This fixes issue #26.

  • Move Map polyfill notice to Compatibility section.

    Maybe fix the cause of issue #31.

  • Improve Installation section on README.md.

  • Refactor Usage section and move it up.

  • Create API section with docs about cache methods, Payload and Timeout.

  • Remove old docs about cache methods, payload and timeout.

  • Change package.json description and keywords.