vuex-cache

library3.5.0jsnpmunverified

Cache dispatched Vuex actions to prevent repeated requests and heavy computations. Version 3.5.0 is stable, with regular maintenance. Supports Vue 2/3 and Vuex 1-3. Unlike manual caching, it provides a simple plugin-based API with `store.cache.dispatch`, `has`, `delete`, and `clear` methods. Uses action name and payload as cache key. ESM and CommonJS compatible, includes TypeScript definitions. Requires Map and Promise polyfills for older environments.

storage

npm install vuex-cache

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUEX-CACHE

vuex-cache

storagejavascriptv3.5.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createCache

✓ import createCache from 'vuex-cache'

✗ const createCache = require('vuex-cache')

Default import; use in Vuex plugins array.

cacheAction

✓ import { cacheAction } from 'vuex-cache'

✗ import cacheAction from 'vuex-cache/cacheAction'

Named export; use to wrap individual actions.

clear

✓ store.cache.clear()

✗ store.cache.clear({})

Method on store.cache; no arguments needed.

Shows setup with createCache plugin, dispatch, has, delete, and clear methods. Uses TypeScript syntax with Vuex Store.

import Vue from 'vue'; import Vuex, { Store } from 'vuex'; import createCache from 'vuex-cache'; const store = new Store({ state: { users: [] }, actions: { FETCH_USER: async ({ commit }, id) => { const res = await fetch(`https://api.example.com/user/${id}`); const user = await res.json(); commit('SET_USER', user); return user; } }, mutations: { SET_USER(state, user) { state.users.push(user); } }, plugins: [createCache({ timeout: 60000 })] }); // First call triggers fetch and caches promise store.cache.dispatch('FETCH_USER', 1).then(user => console.log(user)); // Second call returns cached promise (no fetch) store.cache.dispatch('FETCH_USER', 1).then(user => console.log(user)); // Check cache console.log(store.cache.has('FETCH_USER', 1)); // true // Delete single cache entry store.cache.delete('FETCH_USER', 1); // Clear entire cache store.cache.clear();

Debug

Known issues

gotchaCache key uses both action name and payload; implicit serialization may cause unexpected cache misses for different object references.

fix

Ensure payloads are primitive or consistently structured; consider wrapping payload in a string key if needed.

affects: >=1.0.0

gotchatimeout option removed in v3; use setTimeout or custom logic to invalidate cache.

fix

Do not pass timeout to createCache; manually manage cache expiration with store.cache.delete or clear.

affects: >=3.0.0 <4.0.0

deprecatedcreateCache with string argument (e.g., createCache('mycache')) deprecated in v2; use object argument.

fix

Use createCache({ name: 'mycache' }) instead.

affects: >=2.0.0 <3.0.0

breakingVuex 1 support dropped since v3; requires Vuex 2 or 3.

fix

Upgrade Vuex to version 2 or 3.

affects: >=3.0.0

gotchastore.cache.dispatch does not support namespaced modules with dynamic paths; always use full action path.

fix

Use full path like 'moduleName/ACTION_NAME' when using namespaced modules.

affects: >=1.0.0

gotchaPromise returned by cache.dispatch is shared; mutating its resolved value may affect other callers.

fix

Clone data before mutation if needed, or avoid mutating shared promises.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: store.cache is undefined

createCache not included in Vuex plugins array.

fix

Add plugins: [createCache()] when creating the store.

Error: [vuex] unknown action type: undefined

Action name passed to cache.dispatch is undefined or misspelled.

fix

Verify the action name string and ensure it matches a defined action in the store.

Cannot read properties of undefined (reading 'dispatch')

Trying to use cache before store is fully initialized.

fix

Access store.cache only after store creation, not inside module definitions.

Uncaught (in promise) TypeError: Cannot convert undefined or null to object

Promise polyfill missing in older browsers.

fix

Add Promise polyfill (e.g., @babel/polyfill) before vuex-cache.

TypeError: createCache is not a function

Default import of vuex-cache used incorrectly (e.g., named import instead of default).

fix

Use `import createCache from 'vuex-cache'` (no curly braces).

Upgrade

Version history

3.5.0latest on npm

Audit

Dependencies

vuexrequiredPeer dependency; plugin integrates with Vuex store

vueoptionalPeer dependency; indirectly required via Vuex

Agent activity

30 hits · last 30 days

node

Resources

githubhttps://github.com/superwf/vuex-cache ↗

packagevuex-cache ↗

homepagehttps://github.com/superwf/vuex-cache ↗