16. project [vuejs-14]: de sessie reactief maken

We hebben gezien dat het object [session] dat in het vorige project werd gebruikt, niet-reactieve eigenschappen had: als deze worden gewijzigd, worden de weergaven die deze eigenschappen gebruiken niet bijgewerkt. Het is mogelijk om een reactief object [session] te hebben als dit wordt opgeslagen in de reactieve gegevens van de weergaven. Dit wordt geïllustreerd in het project [vuejs-14].

De projectstructuur is als volgt:

16.1. Het object [session]

Het object [session], dat door alle componenten wordt gedeeld, verandert niet.

16.2. De plug-in [./plugins/pluginSession]

Het script [pluginSession] blijft ongewijzigd. Het gedeelde object [session] is beschikbaar in de eigenschap [$session] van alle componenten.

16.3. Het hoofdscript [main.js]

Het hoofdscript [main.js] blijft ongewijzigd.

16.4. De hoofdweergave [App]

De weergave [App] ziet er nu als volgt uit:

<template>
  <div class="container">
    <b-card>
      <!-- bericht -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation d'un objet partagé entre composants</h4>
      </b-alert>
      <!-- tabel HTML -->
      <Table/>
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // naam
  name: "app",
  // componenten
  components: {
    Table
  },
  // levenscyclus
  created() {
    // genereren van de simulatietabel
    this.$session.generateLignes();
  }
};
</script>

Opmerkingen

• regel 9: de component [Table] genereert niet langer de gebeurtenis [updateTable] die vraagt om de component [Table] opnieuw te genereren. Daardoor is de methode [updateTable] verdwenen;

16.5. De component [Table]

De component [Table] verandert als volgt:

<template>
  <div>
    <!-- lege lijst -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- knop voor opnieuw laden-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- niet-lege lijst-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- simulatietabel -->
      <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 {
  // berekende status
  computed: {
    lignes() {
      return this.session.lignes;
    }
  },
  // interne status
  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 : {}
    };
  },
  // levenscyclus
  created(){
    this.session=this.$session
  },
  // methoden
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // de regel wordt verwijderd
      this.session.deleteLigne(index);
    },
    // de weergegeven lijst opnieuw laden
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // de lijst met simulaties wordt opnieuw gegenereerd
      this.session.generateLignes();
    }
  }
};
</script>

Opmerkingen:

• de nieuwigheid zit in de regels 49-51: wanneer de weergave wordt aangemaakt, wordt de sessie [this.$session] opgeslagen in de eigenschap [session] van regel 45. Op deze plek is de eigenschap [session] reactief;
• regels 58 en 65: in plaats van [this.$session] te gebruiken om een regel aan de tabel toe te voegen of te verwijderen, wordt de reactieve eigenschap [this.session] gebruikt;

16.6. Uitvoering van het project

We krijgen dezelfde resultaten als in het project [vuejs-12].