[ASK] How to call cache on nuxtjs store module?

[azulkipli]

Hi, thank you for creating this plugin.

I made vuex-cache as plugin on NuxtJS and successfully call it on pages as mention in documentation , call store.cache.dispatch in fetch method to initiate cache of ajax call.

I think I need to call cache on store module actions,

I have this sample store module on NuxtJS

// store module for User Interface
export const state = () => ({
  snackbar: false,
  snackbarText: '',
  snackbarColor: 'secondary',
  snackTimeout: 4000
})

// mutations defined as object
export const mutations = {
  setState(state, params) {
    const keys = Object.keys(params)
    keys.forEach(key => (state[key] = params[key]))
  }
}
export const actions = {
  showAlert({ commit }, params) {
    commit('setState', {
      snackbar: true,
      snackbarText: params.msg,
      snackTimeout: params.timeout > 0 ? params.timeout : 4000,
      snackbarColor: params.color !== '' ? params.color : 'secondary'
    })
  },

  // I hope there is `cache` object
  getUUID({ cache, dispatch, commit, state }) {
    this.$axios.setHeader('Authorization', 'Bearer ' + state.accKey)
    return this.$axios.$get('/jsonapi').catch(() => {
      const alertMsg = {
        msg: 'Get UUID failed'
      }
      dispatch('showAlert', alertMsg)
    })
  },
  async doLogin({ cache, commit }) {
     // an axios call
     ....
    commit('setState', {
      isLogin: true,
      uuid: 'sample-uuid-string',
    })
    ....
    // I hope I can do this in the store action
    cache({timeout: 60000}).dispatch('showAlert', alertMsg)
  },
  async doLogout({ commit }) {
    commit('setState', {
      isLogin: false,
      uuid: '',
    })
     // I hope I can do this in the store action
     cache.clear()
   },
 }

How I can call cache on store module itself ?

[VitorLuizC]

This wont work.

export const actions = {
  ...,

    async doLogin({ cache, commit }) {
     // ...
    cache({timeout: 60000}).dispatch('showAlert', alertMsg)
  },
 };

There's no cache property on context (that object you're destructuring) because Vuex don't allow plugins to change the action context.

You have to use an action enhancer, and we named export cacheAction function to handle it.

import { cacheAction } from 'vuex-cache';

export const actions = {
  ...,

  // It receives a function declaration to allow `this` usage.
  doLogin: cacheAction(async function ({ cache, commit }) {
     // ...
    cache.dispatch('showAlert', alertMsg, {timeout: 60000})
  }),
 };

In this 2.x.x version you can find some issues related to cache scope used in cacheAction, right now I'm working to release version 3.0.0 that will fix this issue and others.

Until then (will be soon) you can also import your store instance and use it's cache property instead.

import store from '../store';

export const actions = {
  ...,

  async doLogin({ commit }) {
     // ...
    store.cache.dispatch('showAlert', alertMsg, {timeout: 60000})
  },
 };

[VitorLuizC]

Sorry, I forgot that Nuxt.js don't let you use store directly.

---

These issues related to cacheAction don't happen if you use cached dispatch action outside your action context.

[VitorLuizC]

Have you tested with cacheAction?

[azulkipli]

in previous project I've never call cache inside vuex actions, I call cache only on nuxt pages..

Maybe I will try on another project