Cache

You can use cache property to leverage cache feature on endpoints

Endpoints using cache should have unique key property

Current cache implementations are:

• Memory Cache
• Storage Cache

<template>
  <div class="example-box">
    {{ user.baseURL }}{{ user.url }}
    <br>
    <input
      v-model="userId"
      type="number"
    >
    <br>
    <span v-if="user.data">{{ user.data.name }}</span>
    <span v-if="user.loading">Loading...</span>

    <span v-if="user.error">Error: {{ user.status }} {{ user.error }}</span>
  </div>
</template>

<script>
import { MemoryCache } from '../../../dist/vue-chimera.es'

export default {
  name: 'ReactiveEndpointExample',
  data () {
    return {
      userId: 1,
      keepData: true
    }
  },
  chimera: {
    $options: {
      // 15 seconds expiration
      cache: new MemoryCache(15000)
    },
    user () {
      return {
        url: '/users/' + this.userId,
        // Key property is required to use cache features
        // Provide a unique key based on endpoint parameters
        key: 'user-' + this.userId
      }
    }
  }
}
</script>

https://jsonplaceholder.typicode.com/users/1

Cache busting

You can use .reload(true) or .fetch(true) to ignore cache

export default {
   methods: {
       forceReload() {
          this.users.reload(true)
       }
   }
}

Also to delete cache you can call .deleteCache() on endpoint. But be ware on reactive endpoints this only removes current endpoint cache, you can use .cache.clear() to completely remove cache keys from a cache store.

Custom cache implementation

You can easily extend MemoryCache or StorageCache classes to implement your own rules. (LRU cache, ...)