How would you structure state management for a large Vue app?

<script setup>
// Server state is not client state. This tiny query cache (what libraries
// such as Pinia Colada or TanStack Query do properly) shares one request
// between every component that asks for the same key. The API is FAKE:
// a local promise with a delay, so the demo needs no network.
import { shallowRef, ref, defineComponent, h } from "vue";

let networkCalls = 0;
const fakeApi = (key) =>
  new Promise((resolve) => {
    networkCalls++;
    setTimeout(() => resolve({ key, fetchedAt: networkCalls }), 100);
  });

const cache = new Map(); // key -> { data, error, loading, promise }
function useQuery(key) {
  if (!cache.has(key)) {
    const entry = { data: shallowRef(null), error: shallowRef(null), loading: ref(true), promise: null };
    entry.promise = fakeApi(key)
      .then((d) => (entry.data.value = d))
      .catch((e) => (entry.error.value = e))
      .finally(() => (entry.loading.value = false));
    cache.set(key, entry);
  }
  return cache.get(key); // same refs for every caller
}
function invalidate(key) {
  cache.delete(key);
}

const UserBadge = defineComponent({
  props: { where: String },
  setup(props) {
    const { data, loading } = useQuery("user/1");
    return () => h("p", `${props.where}: ${loading.value ? "loading..." : `user/1 (response #${data.value.fetchedAt})`}`);
  },
});

const show = ref(true);
const calls = ref(0);
const refresh = () => setTimeout(() => (calls.value = networkCalls), 150);
refresh();
function refetch() {
  invalidate("user/1");
  show.value = false;
  setTimeout(() => { show.value = true; refresh(); });
}
</script>

<template>
  <template v-if="show">
    <UserBadge where="Header" />
    <UserBadge where="Sidebar" />
    <UserBadge where="Profile page" />
  </template>
  <button @click="refetch">Invalidate and refetch</button>
  <p>network calls so far: {{ calls }}</p>
</template>

// stores/auth.ts: a small, app-wide store (who is signed in)
import { defineStore, acceptHMRUpdate } from "pinia";
import { ref, computed } from "vue";

export const useAuthStore = defineStore("auth", () => {
  const user = ref<{ id: number; name: string; plan: "free" | "pro" } | null>(null);
  const isPro = computed(() => user.value?.plan === "pro");
  function signIn(u: NonNullable<typeof user.value>) { user.value = u; }
  function signOut() { user.value = null; }
  return { user, isPro, signIn, signOut };
});

// features/cart/cart.store.ts: a domain store that DEPENDS on auth.
// Call the other store inside the setup function, never at module top level.
export const useCartStore = defineStore("cart", () => {
  const auth = useAuthStore();
  const lines = ref<{ sku: string; qty: number; price: number }[]>([]);
  const subtotal = computed(() => lines.value.reduce((s, l) => s + l.qty * l.price, 0));
  const discount = computed(() => (auth.isPro ? Math.round(subtotal.value * 0.1) : 0));
  const total = computed(() => subtotal.value - discount.value);

  function add(sku: string, price: number) {
    const line = lines.value.find((l) => l.sku === sku);
    line ? line.qty++ : lines.value.push({ sku, qty: 1, price });
  }
  // Cross-store reaction kept in ONE place instead of in random components
  auth.$onAction(({ name, after }) => {
    if (name === "signOut") after(() => (lines.value = []));
  });
  return { lines, subtotal, discount, total, add };
});

if (import.meta.hot) import.meta.hot.accept(acceptHMRUpdate(useCartStore, import.meta.hot));