13. Pinia state management

// stores/cart.ts — setup store syntax
import { defineStore } from "pinia";
import { ref, computed } from "vue";

export const useCartStore = defineStore("cart", () => {
  const items = ref<CartItem[]>([]);
  const total = computed(() => items.value.reduce((s, i) => s + i.price * i.qty, 0));   // getter
  function add(item: CartItem) { items.value.push(item); }                              // action
  async function checkout() { await api.checkout(items.value); items.value = []; }
  return { items, total, add, checkout };
});

// In a component
const cart = useCartStore();
const { items, total } = storeToRefs(cart);    // keep reactivity when destructuring state/getters
cart.add({ id: 1, name: "Mouse", price: 900, qty: 1 });