Deux applications sur une page — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 1)

Deux applications sur une page

Premiers pas avec Vue · niveau 2

Énoncé

Une page contient deux sections, <section id="panier"> et <section id="favoris">, chacune avec un compteur et un bouton. Écrire une fonction compteur() qui renvoie les options d'une application, et monter deux applications indépendantes. Après deux clics dans le panier et un dans les favoris, que montre la page ? Que se passe-t-il si l'on monte deux applications sur le même élément ?

Corrigé


const { createApp, ref } = Vue;

function compteur() {
  return {
    setup() {
      return { nombre: ref(0) };
    },
  };
}

createApp(compteur()).mount("#panier");
createApp(compteur()).mount("#favoris");

Après deux clics dans le panier et un dans les favoris, le texte de la page :


Panier : 2
Ajouter
Favoris : 1
Aimer

Chaque appel de compteur() crée un nouvel objet d'options, et chaque appel de setup crée sa propre ref : les deux compteurs sont indépendants. Monter deux applications sur le même élément (meme-cible.js) est refusé :


[Vue warn]: There is already an app instance mounted on the host container.
 If you want to mount another app on the same host container, you need to unmount the previous app by calling `app.unmount()` first.
Panier : 1

La seconde application n'est pas montée ; le paragraphe garde le texte de la première.