npm install pinia

// stores/useCartStore.ts
import { defineStore } from 'pinia';

interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [] as CartItem[],
  }),
  getters: {
    totalPrice: (state) =>
      state.items.reduce((sum, item) => sum + item.price * item.quantity, 0),
    itemCount: (state) =>
      state.items.reduce((sum, item) => sum + item.quantity, 0),
  },
  actions: {
    addItem(item: CartItem) {
      const existing = this.items.find((i) => i.id === item.id);
      if (existing) {
        existing.quantity++;
      } else {
        this.items.push({ ...item, quantity: 1 });
      }
    },
    removeItem(id: number) {
      this.items = this.items.filter((i) => i.id !== id);
    },
  },
});

// ProductCard.vue
<script setup lang="ts">
import { useCartStore } from '@/stores/useCartStore';

const cart = useCartStore();

function addToCart() {
  cart.addItem({ id: 1, name: 'Widget', price: 9.99, quantity: 1 });
}
</script>

<template>
  <button @click="addToCart">Add to Cart ({{ cart.itemCount }})</button>
  <p>Total: ${{ cart.totalPrice.toFixed(2) }}</p>
</template>