0.1.2 • Published 5 years ago
@studytweaks/vuejs-cache v0.1.2
Vuejs cache plugin
Installation
via npm
npm install @studytweaks/vuejs-cachevia yarn
yarn add @studytweaks/vuejs-cacheRequirements
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.