Vuejs cache plugin

Installation

via npm

npm install @uam/vuejs-cache

via yarn

yarn add @uam/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 '@uam/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 | _uam_vuejs_cache | | storeModuleName | store module name | String | false | uam_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 uam_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.uam_cache.<cacheKey>

Or

store.uam_cache[<cacheKey>]

use getters

# File.vue

// ..
// ..
this.$store.getters['uam_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('uam_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('uam_cache/reset')

Making sure you app is mounted after the cache is available

// main.js

// ..
// ..

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