@dzangolab/vuejs-cache

Vuejs cache plugin

Installation

via npm

npm install @dzangolab/vuejs-cache

via yarn

yarn add @dzangolab/vuejs-cache

Requirements

This package need following packages installed in your app

• pouchdb-browser@^7.0.0
• 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.

Custom header have json key and value pair. key is based on cacheKey and value is db version.

{"cacheKey1": 898999, "cacheKey2": 48383}

Usage

Install Vuejs cache plugin as follows:

# main.js

import cachePlugin from '@dzangolab/vuejs-cache'

Vue.use(cachePlugin, {options})

Options

Option	Description	Type	Required	Default
store	Main store to which the cache module is attached to	Object	true
axios	The instance of axios used by app	Object	true
userId	Currently logged in user's id	Integer/String	false	null
databaseName	Name of the cache db	String	false	_cache
storeModuleName	store module name	String	false	cache
dbVersionsHeaderKey	Custom response header key for db version	String	true
cacheConfigs	array value to handle route, db header key, name	array	true
ignoreRoutes	array of route to ignore for cache fetch	array	false	[]

cacheConfigs example

[{cacheKey: 'cacheKey_name', cacheRoute: 'cache_route', isCacheRoutePublic: false}]

Once you have registered the plugin. It attaches a cache or the {storeModuleName} module to the store, The cached data received from the cacheRoute can be accessed as . All store and getters created based on cacheKey

using store

assuming you have not updated the storeModuleName

store.cache.<cacheKey>

Or

store.cache[<cacheKey>]

use getters

# File.vue

// ..
// ..
this.$store.getters['cache/cacheKey_name']

Changing user id

The store has a action to change the user id. Most probably after a login you need to change the user id for the cache

// ..
// ..

this.$store.dispatch('cache/updateCachedUserId', id)

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.

Resetting cache

The store has a action reset the cache

// ..
// ..

this.$store.dispatch('cache/reset')

Making sure you app is mounted after the cache is available

// main.js

// ..
// ..

Vue._cacheInitialized
  .then(() => {
    new Vue({
      el: '#app',
      store
    })
  })