Lecture seule — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 7)

Lecture seule

Communication entre composants · niveau 2

Énoncé

Un panier fournit readonly(lignes) et une fonction ajouter. Que se passe-t-il quand un composant exécute chacune des deux lignes suivantes ?


panier.lignes.value.push("Livre ajouté sans passer par ajouter()");
panier.ajouter("Le Petit Prince");

Corrigé


<script setup>
import { creerPanier } from "./panier.js";

const panier = creerPanier();

function tricher() {
  panier.lignes.value.push("Livre ajouté sans passer par ajouter()");
  console.log("lignes :", JSON.stringify(panier.lignes.value));
}
function ajouterProprement() {
  panier.ajouter("Le Petit Prince");
  console.log("lignes :", JSON.stringify(panier.lignes.value));
}
</script>

Après un clic sur chaque bouton :


[Vue warn] Set operation on key "0" failed: target is readonly. Proxy(Array)
[Vue warn] Set operation on key "length" failed: target is readonly. Proxy(Array)
lignes : []
lignes : ["Le Petit Prince"]

Le push échoue (Vue refuse d'écrire l'élément 0 et la longueur), avec deux avertissements, et le panier reste vide. L'appel de ajouter réussit : la fonction a été créée avec la ref d'origine, modifiable. Le fournisseur garde ainsi le contrôle de toutes les modifications.