Skip to content

Latest commit

 

History

History
79 lines (50 loc) · 1.76 KB

Readme.md

File metadata and controls

79 lines (50 loc) · 1.76 KB

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@^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 '@uam/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 uam_cache module to the store, The cached data received from the cacheRoute can be accessed as

using store

store.uam_cache.cache.<key>

Or

store.uam_cache.cache[<key>]

use getters

# File.vue

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