Pinia

After rendering, serialise pinia.state.value with an escaping serialiser into the page; on the client, assign it back to pinia.state.value right after app.use(pinia), before any store call, because stores read their initial state only when created.

A $subscribe made inside a component is removed when it unmounts unless { detached: true } is passed. And $patch pauses the watcher until the next tick, so a direct write beside it gets no non-sync call; flush: 'sync' reports every write.

Pass initialState: { notifications: { items: [...] } } to createTestingPinia, keyed by the store id; it is merged into the store when created. Force a getter by assigning store.unreadCount = 9, and assign undefined to restore it.

createTestingPinia replaces actions on the store object, but inside a setup store notifyError() calls the local push function it closed over, not store.push. The real push runs; option stores avoid this because this.push goes through the store.

Install Pinia beside Vuex, rewrite cart as defineStore('cart', …) with a state function, mutations folded into actions and context replaced by this, read auth from the Vuex store instance until it moves, then switch cart's callers and delete the Vuex module.

A composable's watchers and computeds join the store's effect scope and live until the store is disposed. Component lifecycle hooks do not follow the store, and inject() sees only app-level provides. Returned refs become state, functions actions, computeds getters.

acceptHMRUpdate keeps the live cart store and its current state while swapping in edited actions and getters and adding or removing state keys. Without it, an edit usually reloads the page, emptying the cart, or leaves the old store code running.

During client hydration a setup store copies the server's value into each returned ref, so the server's empty list overwrites the browser's. skipHydrate() on that ref makes Pinia skip it; option stores use a hydrate() option instead.

Assigning $state keeps the same state object and runs a function $patch that Object.assigns each top-level key: nested objects are replaced whole, absent keys keep their values. $patch(savedPrefs) deep-merges plain objects and reports a payload.

Plugins added with pinia.use() only run once the pinia is installed in an app. For a plain pinia, install it into createApp({}); with createTestingPinia, pass the plugin in its plugins option so it runs before the action stubs.

Spread mapStores, mapState and mapWritableState into computed and mapActions into methods, passing the store's useStore function instead of a Vuex namespace string. mapState is read-only, mapWritableState adds setters, and nothing maps mutations.