Clean Async State Management
summary
Live coding demo of Pinia Colada shows exact APIs: useQuery with hierarchical cache keys (contact search / id), mutation hooks for optimistic updates and rollback, staleTime and GC settings to avoid cache bloat, and cancel/invalidations to refetch in background. Demo wires optimistic UI into search results and detail page, uses delayed loading to avoid flicker, and mentions Vue Router data loaders and abort signals plus a tiny plugin API for composable behaviors.
AI-written summary · about
chapters (10)
- 0:00Async state management intro
- 1:48Why async state matters
- 8:56Reducing user friction
- 13:10Simplifying data fetching with Pinia
- 19:08Handling mutations and loading
- 27:18Optimistic UI updates
- 33:07Low-level cache control in Pinia
- 39:10Extending Pinia with plugins
- 44:06Key benefits of clean async
- 46:14Q&A: Pinia vs TanStack Query
related talks
35mPinia Colada: Smooth Data Fetching for Better UX
27mDeep down the rabbit hole of state management and server cache
44mData Management in Vue
28mPinia Disasterclass
25mEverything Beyond State Management in Stores with Pinia
48mVUE3 & Pinia A Better Pattern for Global State Management
52mState management in a GraphQL era
28mLocal state and server cache: how to balance them with vue-query