Getting more out of your Pinia Stores
summary
Pinia exposes Vue reactivity internals so stores live in a single app-wide ref turned into per-store refs, using effect scopes and ref unwrapping to keep one source of truth. The state() function runs only once (server render) so SSR needs a hydrate step; a skipHydrate flag prevents overwriting browser-backed composables like useLocalStorage. Differences between option stores and setup stores are concrete: setup always runs so composables work as-is, option stores need hydrate for writable composables. The solutions are implemented and solve the SSR overwrite problem.
AI-written summary · about
chapters (7)
- 0:00Start
- 7:33THE PINIA INSTANCE
- 8:39PINIA HOLDS STATE
- 9:30PINIA CONNECTS STATE
- 11:56REF UNWRAPPING
- 17:25SERVER SIDE RENDERING (SSR)
- 23:46SETUP STORE
related talks
25mEverything Beyond State Management in Stores with Pinia
48mVUE3 & Pinia A Better Pattern for Global State Management
16mEffortless State Management in Nuxt 3 with Pinia: Practical Guide
32mProven Pinia Patterns
22mYou might not need Vuex
30mProven Pinia Patterns
42mPinia Disasterclass
25mHow to stay sane while managing complex state, in Vue js