Vuejs cache plugin

Installation

via npm

npm install @studytweaks/vuejs-cache

via yarn

yarn add @studytweaks/vuejs-cache

Requirements

This package need following packages installed in your app

• pouchdb-browser@^6.4.3
• vue@^2.5.16
• vuex@^3.0.1

Api requirements

Your api needs to attach a custom header for db version, the cache data is updated based on this version.

Usage

Install Vuejs cache plugin as follows:

# main.js

import cachePlugin from '@studytweaks/vuejs-cache'

Vue.use(cachePlugin, {options})

Options

| Option | Description | Type | Required | |:-----------------------|:---------------------------------------------------------|:---------|:---------| | store | Main store to which the cache module is attached to | Object | true | | axios | The instance of axios used by app | Object | true | | dbVersionHeaderKey | Custom response header key for db version | String | true | | cacheRoute | Route to fetch cache data | String | true |

Once you have registered the plugin. It attaches a studytweaks_cache module to the store, The cached data received from the cacheRoute can be accessed as

using store

store.studytweaks_cache.cache.<key>

Or

store.studytweaks_cache.cache[<key>]

use getters

# File.vue

// ..
// ..
this.$store.getters['studytweaks_cache/cacheData'](key)

Displaying message to users when updating cache

The cache module has a getter updatingCache that is true when the data is being fetched from the server.

you can use the getter to add visual clues about ongoing update.