npm install pinia

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

createApp(App).use(createPinia()).mount('#app')

// stores/panier.js — syntaxe "Options" du store (proche de Options API, familière)
import { defineStore } from 'pinia'

export const usePanierStore = defineStore('panier', {
  state: () => ({
    articles: [],       // [{ id, nom, prix, quantite }]
    codePromo: null,
  }),
  getters: {
    // équivalent des computed : dérivés, mis en cache, accessibles via store.total
    total: (state) => state.articles.reduce((s, a) => s + a.prix * a.quantite, 0),
    nombreArticles: (state) => state.articles.reduce((s, a) => s + a.quantite, 0),
    // un getter peut dépendre d'un autre getter via `this` (uniquement en syntaxe non-fléchée)
    totalAvecRemise() {
      const remise = this.codePromo ? 0.9 : 1
      return this.total * remise
    },
  },
  actions: {
    // les actions peuvent être synchrones OU asynchrones, et muter directement le state via `this`
    ajouter(produit, quantite = 1) {
      const existant = this.articles.find((a) => a.id === produit.id)
      if (existant) {
        existant.quantite += quantite
      } else {
        this.articles.push({ ...produit, quantite })
      }
    },
    retirer(id) {
      this.articles = this.articles.filter((a) => a.id !== id)
    },
    async appliquerCodePromo(code) {
      const reponse = await fetch(`/api/promos/${code}`)
      if (reponse.ok) this.codePromo = code
    },
    vider() {
      this.articles = []
      this.codePromo = null
    },
  },
})

// stores/utilisateur.js — syntaxe "Setup" du store (Composition API pure, plus flexible)
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUtilisateurStore = defineStore('utilisateur', () => {
  const utilisateur = ref(null)
  const chargement = ref(false)

  const estConnecte = computed(() => utilisateur.value !== null)
  const estAdmin = computed(() => utilisateur.value?.role === 'admin')

  async function connecter(identifiants) {
    chargement.value = true
    try {
      const reponse = await fetch('/api/connexion', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(identifiants),
      })
      if (!reponse.ok) throw new Error('Identifiants invalides')
      utilisateur.value = await reponse.json()
    } finally {
      chargement.value = false
    }
  }

  function deconnecter() {
    utilisateur.value = null
  }

  // tout ce qui est retourné est PUBLIC (équivalent state+getters+actions combinés)
  return { utilisateur, chargement, estConnecte, estAdmin, connecter, deconnecter }
})

<script setup>
import { storeToRefs } from 'pinia'
import { usePanierStore } from '../stores/panier'

const panier = usePanierStore()

// PIÈGE : déstructurer directement `panier` casse la réactivité (comme reactive()).
// storeToRefs() convertit state+getters (PAS les actions) en refs réactives.
const { articles, total, nombreArticles } = storeToRefs(panier)

// les actions, elles, se déstructurent normalement (ce sont de simples fonctions)
const { ajouter, vider } = panier
</script>

<template>
  <p>{{ nombreArticles }} article(s) — Total : {{ total.toFixed(2) }} €</p>
  <button @click="vider">Vider le panier</button>
</template>

// Store composé : un store peut utiliser un autre store
import { defineStore } from 'pinia'
import { useUtilisateurStore } from './utilisateur'

export const useCommandesStore = defineStore('commandes', {
  state: () => ({ historique: [] }),
  actions: {
    async passerCommande(articles) {
      const utilisateurStore = useUtilisateurStore()
      if (!utilisateurStore.estConnecte) throw new Error('Connexion requise')
      const reponse = await fetch('/api/commandes', {
        method: 'POST',
        body: JSON.stringify({ articles, utilisateurId: utilisateurStore.utilisateur.id }),
      })
      this.historique.push(await reponse.json())
    },
  },
})