Module Recap

Module 06 covered Pinia end to end: why global state exists, defining stores with setup syntax, the state/getters/actions model, using stores in components with storeToRefs, and persisting state across sessions. FamilyTree’s data layer is now complete.

What you learned

Prop drilling is the problem; Pinia is the solution. When multiple components need the same data, threading it through props creates fragile, verbose chains. A store makes data directly accessible to any component that needs it.

defineStore('id', setup) creates a store. The setup function uses familiar Composition API patterns: ref for state, computed for getters, functions for actions. Return everything components need.

State and getters are reactive; actions are functions. Derive values with computed rather than storing them redundantly. Actions are the right way to update state — not direct mutation from components.

storeToRefs preserves reactivity when destructuring. Destructuring state and getters directly from the store breaks reactivity. storeToRefs(store) wraps them in refs. Actions can be destructured directly.

pinia-plugin-persistedstate persists to localStorage. Add { persist: true } and state survives page refreshes. afterHydrate normalizes old persisted data when the schema evolves.

How this connects to FamilyTree

familyStore.ts is the backbone of the app:

State:    people[]         focusPersonId
           ↓                    ↓
Getters:  focusPerson, parents, children, stepChildren,
          currentSpouse, formerSpouses, siblings
           ↓
Actions:  addPerson, updatePerson, deletePerson,
          addParent, removeParent, addStepParent,
          addSpouse, recordDivorce, updateSpouseRelationship,
          addSibling, removeSibling, setFocus

All views read from getters. All modifications go through actions. The entire family tree persists automatically. afterHydrate ensures the app handles data saved before new fields were added.

Key terms

Term	What it means
defineStore('id', setup)	Creates a Pinia store with setup syntax
State	ref() values in the store setup function
Getter	computed() values in the store setup function
Action	Regular functions in the store setup function
storeToRefs(store)	Destructures state/getters as reactive refs
persist: true	Persists all returned state to localStorage
afterHydrate	Callback after state is restored from localStorage

What is next

Module 07 — FamilyTree Project Build →

Module 07 builds FamilyTree from scratch, applying everything from all six modules. You’ll scaffold the project, define the TypeScript types, build the Pinia store, create the component tree, wire up Vue Router, build the forms and views, and implement the full relationship management UI.