Lesson 23 — Composable store

Shared state without a library

A composable that creates its ref inside the function gives every caller a separate copy. Move the ref outside the function (to the module level) and every caller gets the same one — a tiny store that all components share. Pinia, Vue's official store library, builds on this idea.

const user = ref(null)            // one copy for the whole app
export function useAuth() {
  return { user, logout: () => (user.value = null) }
}

Why it matters: a cart badge in the header and the cart page must show the same number.