Server state и client state
↑ 5.2 Состояние: Pinia, SSOT, Vue Query · ← Предыдущая · → Следующая
Зачем это на собесе
Разделение видов состояния — ключ к простому и надёжному фронтенду.
Объяснение
Client state принадлежит приложению: тема, открыта ли панель, черновик формы. Синхронный, полностью под контролем клиента.
Server state принадлежит серверу; клиент держит кэшированную копию: заказы, профиль, справочники. Свойства:
- Асинхронный доступ, ожидание, ошибки.
- Может устареть в любой момент (изменён другими).
- Нужны кэш, дедупликация запросов, повторные попытки, обновление в фоне, инвалидация, пагинация, бесконечные списки, оптимистичные обновления.
| Аспект | Client state | Server state |
|---|---|---|
| Владелец | приложение | сервер |
| Хранение | ref/Pinia | кэш запросов (TanStack Query) |
| Актуальность | всегда | устаревает (stale) |
| Инвалидация | не нужна | обязательна |
| Ошибки и загрузка | обычно нет | обязательные состояния |
Ошибка — класть серверные данные в Pinia и вручную писать loading/error/refetch в каждом сторе. Query решает эти задачи декларативно:
const { data: orders, isPending, isError, error, refetch } = useQuery({
queryKey: ["orders", filters],
queryFn: ({ signal }) => api.orders(filters.value, { signal }),
staleTime: 30_000,
});Подход: Pinia — клиентское состояние, Query — серверное, между ними — минимальные связи (например, идентификатор пользователя как часть ключа запроса).
Другие решения: SWR-подходы (swrv), Apollo/urql для GraphQL, Pinia Colada.
Нюансы и подводные камни
- Копирование данных Query в стор создаёт второй источник истины.
- Локальные изменения серверных данных (черновики) храните отдельно.
- Ключи запросов должны включать все параметры.
- Авторизация: при смене пользователя очищайте кэш (
queryClient.clear()).
Практика
- Разделите состояние своего приложения на client и server.
- Перенесите загрузку списка из Pinia в
useQuery. - Очищайте кэш при выходе из системы.
Вопросы с ответами
Чем server state отличается от client state?
Он принадлежит серверу, кэшируется на клиенте, устаревает и требует управления кэшем, инвалидации и состояний загрузки.
Зачем не хранить серверные данные в Pinia?
Придётся вручную реализовывать кэш, дедупликацию, обновление и ошибки, а данные будут дублироваться.