Кеширование запросов

Кеширование запросов является важной частью оптимизации фронтенд-приложений, обеспечивая снижение количества сетевых обращений и ускорение отклика интерфейса. В Quasar Framework кеширование может быть реализовано как на уровне компонентов, так и с использованием сторонних библиотек, интегрируемых через Vue.js.

Использование Vuex для кеширования

Quasar интегрируется с Vuex, что позволяет хранить результаты API-запросов в централизованном состоянии. Основной подход включает следующие шаги:

Создание модуля Vuex для кеша

export const state = () => ({
  cache: {}
});

export const mutations = {
  setCache(state, { key, data }) {
    state.cache[key] = {
      data,
      timestamp: Date.now()
    };
  }
};

export const getters = {
  getCache: (state) => (key, maxAge = 60000) => {
    const item = state.cache[key];
    if (!item) return null;
    if (Date.now() - item.timestamp > maxAge) return null;
    return item.data;
  }
};

Использование модуля при запросах

async function fetchData(store, key, fetchFunction) {
  const cached = store.getters['cache/getCache'](key);
  if (cached) return cached;

  const data = await fetchFunction();
  store.commit('cache/setCache', { key, data });
  return data;
}

Такой подход позволяет контролировать время жизни кеша (maxAge) и минимизировать повторные сетевые запросы.

Кеширование с помощью Quasar Plugin Axios

Quasar имеет встроенную поддержку плагинов, и один из наиболее распространённых вариантов — интеграция axios с кешированием. Можно создать собственный плагин:

import { boot } from 'quasar/wrappers';
import axios from 'axios';

const cache = {};

export default boot(({ app }) => {
  app.config.globalProperties.$axios = async (url, options = {}) => {
    const key = url + JSON.stringify(options);
    if (cache[key]) return cache[key];

    const response = await axios(url, options);
    cache[key] = response.data;
    return response.data;
  };
});

Особенности такого подхода:

Кеш хранится в оперативной памяти.
Простейший метод — подходит для небольших приложений.
Можно расширить функциональность с использованием localStorage или IndexedDB для долговременного хранения.

Стратегии кеширования

При реализации кеширования важно определять стратегию:

Cache-first Сначала возвращается кешированная версия данных, если она существует, и затем, при необходимости, выполняется обновление в фоне. Подходит для интерфейсов с большим количеством повторяющихся запросов.
Network-first Сначала выполняется запрос к серверу, а кеш обновляется только после успешного ответа. Подходит для данных, требующих актуальности.
Stale-while-revalidate Возвращается устаревший кеш, но одновременно запускается обновление данных с сервера. Этот метод снижает задержки и сохраняет актуальность информации.

Использование Quasar Storage для долговременного кеша

Для хранения кеша между сессиями можно использовать Quasar Storage API:

import { LocalStorage } from 'quasar';

function setCache(key, data, ttl = 60000) {
  const item = { data, expiry: Date.now() + ttl };
  LocalStorage.set(key, item);
}

function getCache(key) {
  const item = LocalStorage.getItem(key);
  if (!item) return null;
  if (Date.now() > item.expiry) {
    LocalStorage.remove(key);
    return null;
  }
  return item.data;
}

Позволяет хранить данные даже после перезагрузки страницы.
TTL (time-to-live) управляет временем актуальности кеша.

Интеграция с Composition API

При использовании Composition API Quasar можно создать хук для кешированных запросов:

import { ref } from 'vue';

export function useCachedFetch(key, fetchFunction, store) {
  const data = ref(null);
  const loading = ref(false);

  const load = async () => {
    loading.value = true;
    const cached = store.getters['cache/getCache'](key);
    if (cached) {
      data.value = cached;
    } else {
      data.value = await fetchFunction();
      store.commit('cache/setCache', { key, data: data.value });
    }
    loading.value = false;
  };

  return { data, loading, load };
}

Позволяет легко интегрировать кеширование в компоненты.
Отдельно управляет состоянием загрузки.