# vuex-cache

> Cache dispatched actions and prevent repeated requests and heavy actions.

Latest version **3.5.0** (published 2022-04-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuex-cache
pnpm add vuex-cache
yarn add vuex-cache
bun add vuex-cache
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.5.0 |
| Published | 2022-04-28 |
| First published | 2017-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 65.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | superwf@gmail.com |
| Maintainers | superwf, vitorluizc |
| Keywords | vuex, vuex-plugin, cache, cache-actions |

## Links

- npm: https://www.npmjs.com/package/vuex-cache
- Repository: https://github.com/superwf/vuex-cache
- npm.io page: https://npm.io/package/vuex-cache

## Alternatives

- [memory-cache](https://npm.io/package/memory-cache.md) — 795.0K weekly downloads
- [@httptoolkit/proxy-agent](https://npm.io/package/@httptoolkit/proxy-agent.md) — 11.2K weekly downloads
- [express-cache-controller](https://npm.io/package/express-cache-controller.md) — 5.3K weekly downloads
- [http-cache-middleware](https://npm.io/package/http-cache-middleware.md) — 4.5K weekly downloads
- [cache2](https://npm.io/package/cache2.md) — 1.5K weekly downloads

## Recent versions

- 3.5.0 (latest) — 2022-04-28
- 3.4.0 — 2021-05-02
- 3.3.0 — 2020-07-29
- 3.2.0 — 2020-05-15
- 3.1.1 — 2020-03-22
- 3.1.0 — 2019-04-12
- 3.0.0 — 2019-03-10
- 2.1.0 — 2019-01-03
- 1.4.1 — 2018-11-06
- 1.4.0 — 2018-11-02
- 1.3.0 — 2018-10-11
- 1.2.0 — 2018-09-21
- 1.1.1 — 2018-02-20
- 1.1.0 — 2018-02-11
- 1.0.1 — 2017-12-08
- … 4 more at https://npm.io/package/vuex-cache/versions

## README

# 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`](https://babeljs.io/docs/en/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.

```sh
npm install vuex-cache --save

# For Yarn use the command below.
yarn add vuex-cache
```

Import `createCache` factory and use on `Vuex`'s plugins.

```js
import Vue from 'vue';
import Vuex, { Store } from 'vuex';
import createCache from 'vuex-cache';

const store = new Store({
  plugins: [createCache()],
  ...
});
```

### Installation on [Nuxt.js](https://github.com/nuxt/nuxt.js)

#### Global plugin (`~/plugins/vuex-cache.js`)
> Only use it if you're not using [Classic Mode](https://nuxtjs.org/guide/vuex-store#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`**

```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`**

```js
module.exports = {
  ...,
  plugins: [
    ...,
    { src: '~/plugins/vuex-cache.js', ssr: false },
  ]
};
```

#### Global store (`~/store/index.js`)
```javascript
import createCache from 'vuex-cache';

export const plugins = [
    createCache()
]
```

## Usage

After install you can use `cache` property to call cache methods.

```js
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.

```js
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.

```js
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.

```js
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.

```js
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.

```js
store.cache.delete('user/GET_USER');
//=> true

store.cache.delete('FETCH_REPOSITORY', 219);
//=> false
```

> Only exact matches are deleted. Use `store.cache.clear` to delete all items or by action name.

### `store.cache.clear`

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

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

If using the type parameter, only actions with the specified type are deleted from cache and the number of deleted keys is returned.

```js
// store.cache.dispatch('FETCH_REPOSITORIES', { page: 1 });
// store.cache.dispatch('FETCH_REPOSITORIES', { page: 2 });
store.cache.clear('FETCH_REPOSITORIES');
//=> 2
```

### `store.cache.state`

> Warning! Don't use this method in production.

Helper method for debugging. Prints the current value of the cache (state).

```js
store.cache.dispatch('FETCH_REPOSITORIES', { page: 1 });
store.cache.dispatch('FETCH_REPOSITORIES', { page: 2 });
store.cache.state();
//=> Map(2){...}
```

### `mapCacheActions`

Create component methods that dispatch a cached action.

```js
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.

```js
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.

```js
const store = new Store({
  plugins: [
    createCache({ timeout: 10000 })
  ],
  ...
});
```

After milliseconds defined in timeout option an action is expired from cache.

```js
// 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.

```js
store.cache.dispatch('FETCH_REPOSITORY', 219, {
  timeout: 30000
});

// OR

store.cache.dispatch({
  type: 'FETCH_REPOSITORY',
  payload: 219,
  timeout: 30000
});
```

---
_Source: https://npm.io/package/vuex-cache · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._