IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Introduction au framework VUE.JS par l'exemple


précédentsommairesuivant

XVII. projet [vuejs-14] : rendre la session réactive

On a vu que l’objet [session] utilisé dans le projet précédent avait des propriétés non réactives : si on les modifie, les vues utilisant ces propriétés ne sont pas mise à jour. Il est possible d’avoir un objet [session] réactif si on le stocke dans les données réactives des vues. C’est ce que montre le projet [vuejs-14].

L’arborescence du projet est la suivante :

Image non disponible

XVII-A. L’objet [session]

L’objet [session] partagé par tous les composants ne change pas.

XVII-B. Le plugin [./plugins/pluginSession]

Le script [pluginSession] ne change pas. L’objet partagé [session] est disponible dans la propriété [$session] de tous les composants.

XVII-C. Le script principal [main.js]

Le script principal [main.js] ne change pas.

XVII-D. La vue principale [App]

La vue [App] est désormais la suivante :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
<template>
  <div class="container">
    <b-card>
      <!-- message -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation d'un objet partagé entre composants</h4>
      </b-alert>
      <!-- table HTML -->
      <Table/>
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // nom
  name: "app",
  // composants
  components: {
    Table
  },
  // cycle de vie
  created() {
    // génération du tableau des simulations
    this.$session.generateLignes();
  }
};
</script>

Commentaires

  • ligne 9 : le composant [Table] n’émet plus l’événement [updateTable] qui demande à ce que le composant [Table] soit régénéré. Du coup, la méthode [updateTable] a disparu ;

XVII-E. Le composant [Table]

Le composant [Table] évolue de la façon suivante :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
<template>
  <div>
    <!-- liste vide -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- bouton de rechargement-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- liste non vide-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- tableau des simulations -->
      <b-table striped hover responsive :items="lignes" :fields="fields">
        <template v-slot:cell(action)="row">
          <b-button variant="link" @click="supprimerLigne(row.index)">Supprimer</b-button>
        </template>
      </b-table>
    </template>
  </div>
</template>

<script>
export default {
  // état calculé
  computed: {
    lignes() {
      return this.session.lignes;
    }
  },
  // état interne
  data() {
    return {
      fields: [
        { label: "#", key: "id" },
        { label: "Marié", key: "marié" },
        { label: "Nombre d'enfants", key: "enfants" },
        { label: "Salaire", key: "salaire" },
        { label: "Impôt", key: "impôt" },
        { label: "", key: "action" }
      ],
      session : {}
    };
  },
  // cycle de vie
  created(){
    this.session=this.$session
  },
  // méthodes
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // on supprime la ligne
      this.session.deleteLigne(index);
    },
    // rechargement de la liste affichée
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // on régènère la liste des simulations
      this.session.generateLignes();
    }
  }
};
</script>

Commentaires :

  • la nouveauté est lignes 49-51 : lorsque la vue est créée, la session [this.$session] est stockée dans la propriété [session] de la ligne 45. Placée ici, la propriété [session] est réactive ;
  • lignes 58 et 65 : au lieu d’utiliser [this.$session] pour ajouter / supprimer une ligne de la table, on utilise la propriété réactive [this.session] ;

XVII-F. Exécution du projet

Image non disponible

On obtient les mêmes résultats que dans le projet [vuejs-12].


précédentsommairesuivant

Licence Creative Commons
Le contenu de cet article est rédigé par Serge Tahé et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2019 Developpez.com.