Composable с кешированием: ```javascript // composables/useQueryCache.js import { ref, shallowRef, onUnmounted } from 'vue' const cache = new Map() function getCacheKey(key) { return typeof key === 'string' ? key : JSON.stringify(key) } export function useQueryCache(key, fetcher, options = {}) { const { ttl = 60000, // Время жизни кеша (мс) staleTime = 5000, // Время "свежести" -- не рефетчим cacheTime = 300000, // Сколько держать в памяти после unmount refetchOnMount = true } = options const cacheKey = getCacheKey(key) const data = shallowRef(null) const error = ref(null) const isLoading = ref(false) const isFetching = ref(false) // Фоновый рефетч (stale-while-revalidate) function getCachedData() { const entry = cache.get(cacheKey) if (!entry) return null if (Date.now() - entry.timestamp > ttl) { cache.delete(cacheKey) return null } return entry } async function execute() { const cached = getCachedData() if (cached) { data.value = cached.data // Данные свежие -- не рефетчим if (Date.now() - cached.timestamp < staleTime) return // Данные "stale" -- показываем старые, обновляем в фоне isFetching.value = true } else { isLoading.value = true } try { const result = await fetcher() data.value = result.data cache.set(cacheKey, { data: result.data, timestamp: Date.now() }) } catch (err) { error.value = err } finally { isLoading.value = false isFetching.value = false } } if (refetchOnMount) execute() // Очистка кеша после cacheTime без подписчиков onUnmounted(() => { setTimeout(() => { // Если никто не использует -- удаляем const entry = cache.get(cacheKey) if (entry && Date.now() - entry.timestamp > cacheTime) { cache.delete(cacheKey) } }, cacheTime) }) return { data, error, isLoading, isFetching, execute } } // Инвалидация кеша export function invalidateCache(keyOrPrefix) { if (typeof keyOrPrefix === 'string') { // Удаляем по точному ключу или префиксу for (const key of cache.keys()) { if (key === keyOrPrefix || key.startsWith(keyOrPrefix)) { cache.delete(key) } } } else { cache.clear() } } ``` Использование: ```vue ``` TanStack Query (Vue Query) -- production-решение: ```javascript // main.js import { VueQueryPlugin } from '@tanstack/vue-query' app.use(VueQueryPlugin, { queryClientConfig: { defaultOptions: { queries: { staleTime: 30000, gcTime: 300000, // cacheTime в v5 retry: 2, refetchOnWindowFocus: true } } } }) ``` ```vue ``` --- ## 📌 Реальные кейсы 🔹 **Справочники** -- списки стран, категорий. Меняются раз в день. TTL = 24 часа 🔹 **Профиль юзера** -- stale-while-revalidate. Показывай кешированный, обновляй в фоне 🔹 **Фид/лента** -- короткий staleTime (5 сек), частые инвалидации при новых постах --- ## Частые ошибки ```javascript // ❌ Бесконечный кеш без инвалидации -- устаревшие данные cache.set(key, data) // Никогда не чистится // ✅ TTL + инвалидация при мутациях cache.set(key, { data, timestamp: Date.now() }) // + invalidateCache() после POST/PUT/DELETE // ❌ Кешируешь POST-запросы -- разный body, один ключ cache.set('/api/search', result) // ✅ Ключ кеша должен включать параметры cache.set(JSON.stringify({ url: '/search', params: { q: 'vue' } }), result) // ❌ Не отличаешь loading от refetching // Юзер видит спиннер при фоновом обновлении // ✅ isLoading = первая загрузка, isFetching = фоновое обновление ``` --- ## Резюме | Стратегия | Когда | |---|---| | Простой TTL | Редко меняющиеся данные | | Stale-while-revalidate | Показать быстро, обновить в фоне | | Optimistic update | Мгновенный UI-отклик | | TanStack Query | Продакшен, сложные сценарии | ---

Как реализовать кеширование API-запросов на клиенте?