js-vue-cache
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    js-vue-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

    mapCacheActions

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

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

    Install

    npm i js-vue-cache

    DownloadsWeekly Downloads

    16

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    62.2 kB

    Total Files

    10

    Last publish

    Collaborators

    • rowling7