Skip to main content
Version: v2

Set & Query Cache

The cache also supports updating and querying, As we mentioned in cache mode, each cached data is saved with the method instance that sends the request as the key, so the method instance will also be used when updating the cache manually to find the corresponding cached data.

Update static cache data

<template>
<button @click="handleTodolistToggle">Switch date, hit cache</button>
</template>
<script setup>
import { setCache } from 'alova';
import { ref } from 'vue';

const getTodoListByDate = dateList =>
alovaInstance.Get('/todo/list/dates', {
params: { dateList }
});
// Get 5 days of data in batches during initialization
const dates = ref(['2022-05-01', '2022-05-02', '2022-05-03', '2022-05-04', '2022-05-05']);
const {
//...
onSuccess
} = useWatcher(() => getTodoListByDate(dates.value.join()), [dates], {
immediate: true
});
onSuccess(todoListDates => {
if (todoListDates.length <= 1) {
return;
}

// By default, the data of these 5 days will be cached together in a key
// In order to make subsequent requests for data of a certain day also hit the cache, we can disassemble the data of 5 days into days, and manually set the response cache successively through setCache
todoListDates.forEach(todoDate => {
// setCache parameter description:
// Parameter 1: method instance object, which is used to specify the key of the cache
// Parameter 2: Cache data
setCache(getTodoListByDate(todoDate.date), [todoDate]);
});
});

const handleTodolistToggle = () => {
// At this time, when the switching date is May 1, it will hit the response cache we manually set.
// The dates value is being monitored by useWatcher, so changing it can automatically trigger the request
dates.value = ['2022-05-01'];
};
</script>

Dynamically set cache data

You can also pass in a callback function in setCache to dynamically calculate the cache data and return the cache data that needs to be updated.

setCache(getTodoListByDate('2022-10-01'), oldCache => {
// Return the data that needs to be cached
return {
...oldCache,
expire: isAfter('2022-10-01', new Date())
};
});

Similarly, you can also dynamically find method instances through method instance matcher.

setCache(
{
name: 'todoList',
filter: (method, index, ary) => {
return index < 5;
}
},
'newCache'
);

Abort to set cache

Sometimes you need to dynamically determine whether to update the cache. If no data is returned in the callback function of setCache, or undefined is returned, the original cache data will not be updated at this time

setCache(getTodoListByDate('2022-10-01'), oldCache => {
const isExpired = isAfter('2022-10-01', new Date());
if (!isExpired) {
return; // abort cache updating when return the undefined
}
return null; // update the cache to null
});

Cache query

At the same time, we also provide a cache query method.

import { queryCache } from 'alova';

const cacheData = queryCache(getTodoListByDate('2022-10-01'));

You can also dynamically find method instances via method instance matcher.

const cacheData = queryCache({
name: 'todoList',
filter: (method, index, ary) => {
return index < 5;
}
});