state/pinia-store-to-refs

Why

A Pinia store is a reactive object. const { name, total } = useCartStore() copies the current values into plain variables, so the template keeps showing them after the store changes: the cart badge says 0 while the cart fills up. Nothing warns about it.

Fix

Use const { name, total } = storeToRefs(store) for state and getters, or read them through the store (cart.total). Actions are bound to the store and may be destructured directly: const { addItem } = cart.

Examples

// bad
const { items, total, addItem } = useCartStore()
// good
const cart = useCartStore()
const { items, total } = storeToRefs(cart)
const { addItem } = cart

Sources

• Pinia docs, Defining a Store (destructuring from a store)

Read it in the terminal

npx github:dawidolko/frontend-skills explain state/pinia-store-to-refs