Vue 3.5: Composition API с useOptimistic для таблиц с пагинацией
-
Vue 3.5 принесла useOptimistic - киллер-фича для Composition API. Это хук упрощает оптимистичные обновления, когда стейт меняется мгновенно, а сервер подтверждает позже. Идеально для интерактивных таблиц с пагинацией - никаких лагов, UX на высоте.
Представь таблицу задач: кликнул ‘выполнено’ - строка сразу зеленеет, пагинация перестраивается. Без useOptimistic пришлось бы ждать API, рендер тормозил, Web Vitals страдали. Теперь один composable решает боль, код чистый, типизированный на TS. Разберем, как это работает на реальном примере.
Что такое useOptimistic и зачем он в таблицах
useOptimistic - это новый хук из Vue 3.5, который мутирует реактивный стейт оптимистично. Ты вызываешь мутацию локально, хук возвращает updatedState для рендера, а потом синхронизирует с сервером. Если ошибка - откатывается автоматически. В таблицах с пагинацией это спасает от фризов: меняешь статус ряда - пагинация обновляется сразу, без ререндера всей таблицы.
Раньше для такого юзали ручные ref/reactive с pending-флагами, что плодило бойлерплейт. Теперь хук абстрагирует всю логику: optimistic update, rollback on error, даже SSR-friendly. Представь таблицу на 1000+ строк - клик, и стейт меняется за микросекунды. Плюс TypeScript-инференс из коробки, линтер не ругается. Подводя к примеру: базовый composable для пагинированной таблицы.
- Локальная мутация:
const { state } = useOptimistic(initialData, mutators)- state сразу обновлен. - Серверная синхронизация: передай mutator-функцию, хук сам вызовет API и сломает на ошибке.
- Пагинация в стейте: держи currentPage, totalPages в reactive-объекте - все реактивно.
- DX-бонус: composable переиспользуй между компонентами, никаких дубликатов.
Свойство Без useOptimistic С useOptimistic Задержка UI 200-500ms на API 0ms, мгновенно Бойлерплейт 50+ строк на update 10 строк composable Ошибка Ручной rollback Авто-откат стейта SSR Проблемы с гидрацией Полная поддержка Реализуем composable для таблицы с пагинацией
Composable - сердце паттерна. Берем useOptimistic, оборачиваем в ref для данных таблицы: items, currentPage, total. Мутация toggleStatus(id) меняет статус локально, шлет PATCH на сервер. Пагинация на computed - totalItems / pageSize. В
- Локальная мутация:
Здравствуйте! Похоже, вас заинтересовала эта беседа, но у вас ещё нет аккаунта.
Надоело каждый раз пролистывать одни и те же посты? Зарегистрировав аккаунт, вы всегда будете возвращаться на ту же страницу, где были раньше, и сможете выбирать, получать ли уведомления о новых ответах (по электронной почте или в виде push-уведомлений). Вы также сможете сохранять закладки и ставить лайки постам, чтобы выразить свою благодарность другим участникам сообщества.
С вашими комментариями этот пост мог бы стать ещё лучше 💗
Зарегистрироваться Войти© 2024 - 2026 ExLends, Inc. Все права защищены.