Pinia

Pinia is Vue's recommended store: define stores with `defineStore` using option or setup syntax. State, getters (computed), and actions (sync or async) colocate domain logic outside components.

					export const useCartStore = defineStore('cart', () => {
  const items = ref([]);
  const total = computed(() => items.value.reduce((s, i) => s + i.price, 0));
  function add(item) { items.value.push(item); }
  return { items, total, add };
});
				

Plugins add persistence, logging, or SSR hydration. Prefer one store per domain boundary, not a single global bag.

On interviews: Pinia vs Vuex (no mutations boilerplate), setup stores vs option stores, SSR `pinia.state.value` hydration.

Common pitfalls: storing UI-only ephemeral flags globally, actions that silently mutate multiple stores, and persist plugins saving tokens insecurely.

The trade-off is simple global coordination versus debugging cost when many features share one store.

Checklist:

• Store by domain, not by component.
• Actions own async and side effects.
• Use getters for derived data.
• Plan SSR hydration and client takeover.