15. project [vuejs-13]: een component bijwerken, gebruik van een sessie

Het project [vuejs-13] bouwt voort op het project [vuejs-12] en voert de volgende wijziging door: de tabel die door de tabel HTML wordt weergegeven, wordt gedefinieerd in een object [session] dat bij alle componenten bekend is. Dit is dus een manier om informatie tussen componenten te delen. Dit concept is rechtstreeks geïnspireerd op de websessie. We gebruiken de plug-in-methode om dit gedeelde object beschikbaar te maken in een attribuut [Vue.$session].

De projectstructuur is als volgt:

15.1. Het object [session]

Het object [session], dat door alle componenten wordt gedeeld, wordt gedefinieerd in het script [./session.js]:


const session = {
  // lijst met simulaties
  get lignes() {
    return this._lignes;
  },
  // de lijst met simulaties genereren
  generateLignes() {
    this._lignes =
      [
        { id: 3, marié: "oui", enfants: 2, salaire: 35000, impôt: 1200 },
        { id: 5, marié: "non", enfants: 2, salaire: 35000, impôt: 1900 },
        { id: 7, marié: "non", enfants: 0, salaire: 30000, impôt: 2000 }
      ]
  },
  // verwijdering van regel nr. index
  deleteLigne(index) {
    this._lignes.splice(index, 1);
  }
}
// het object [session] exporteren
export default session;

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

Het script [pluginSession] luidt als volgt:


export default {
  install(Vue, session) {
    // voegt een eigenschap [$session] toe aan de weergaveklasse
    Object.defineProperty(Vue.prototype, '$session', {
      // wanneer er naar Vue.$session wordt aangeroepen, wordt de tweede parameter [session] van de methode [install]
      get: () => session,
    })
  }
}

regel 4: het gedeelde object [session] zal beschikbaar zijn in de eigenschap [$session] van alle componenten;

15.3. Het hoofdscript [main.js]

Het hoofdscript [main.js] is als volgt:


// imports
import Vue from 'vue'
import App from './App.vue'

// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// sessie
import session from './session';
import pluginSession from './plugins/pluginSession'
Vue.use(pluginSession, session)

// configuratie
Vue.config.productionTip = false

// projectinstantiëring [App]
new Vue({
  name: "app",
  render: h => h(App),
}).$mount('#app')

regels 14-16: de plug-in [pluginSession] wordt geïntegreerd in het framework [Vue.js];
na regel 16 is het attribuut [$session] beschikbaar voor alle componenten;

15.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-13] : mise à jour d'un composant, partage des données avec une session</h4>
      </b-alert>
      <!-- tabel HTML -->
      <Table @updateTable="updateTable" :key="versionTable"/>
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // naam
  name: "app",
  // componenten
  components: {
    Table
  },
  // interne status
  data() {
    return {
      // tabelversie
      versionTable: 1
    };
  },

  // methoden
  methods: {
    updateTable() {
      // eslint-disable-next-line
      console.log("App updateTable");
      // versie van tabel verhogen
      this.versionTable++;
    }
  }
};
</script>

Opmerkingen

de weergave [App] beheert voortaan niet langer de tabel die wordt weergegeven door de component [Table] uit regel 9;
regel 9: de component [Table] genereert de gebeurtenis [updateTable], die vraagt om de component [Table] opnieuw te genereren. Een manier om dit te doen is door het attribuut [:key] te gebruiken. Aan dit attribuut wordt een wijzigbare waarde toegekend. Telkens wanneer deze waarde wordt gewijzigd, wordt de component [Table] opnieuw gegenereerd;
regel 9: de waarde van het attribuut [:key] is het attribuut [versionTable] van regel 27. De methode [updateTable] (regels 33-38) is verantwoordelijk voor het opnieuw genereren van de component [Table] uit regel 9. Hiervoor verhoogt de methode de waarde van het attribuut [:key] van de component [Table], regel 37. De component [Table] wordt vervolgens automatisch opnieuw gegenereerd;

15.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>
      <!-- herlaadknop-->
      <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" }
      ]
    };
  },
  // methoden
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // de regel wordt verwijderd
      this.$session.deleteLigne(index);
      // de bovenliggende component wordt gevraagd de weergave bij te werken
      this.$emit("updateTable");
    },
    // de weergegeven lijst opnieuw laden
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // de lijst met simulaties wordt opnieuw gegenereerd
      this.$session.generateLignes();
      // de bovenliggende component wordt gevraagd de weergave bij te werken
      this.$emit("updateTable");
    }
  }
};
</script>

Opmerkingen:

het attribuut [lignes] (regels 4, 12, 17) is niet langer een parameter die door de bovenliggende component wordt vastgesteld, maar een berekend attribuut van de component [Table] (regels 30-32). [lignes] is dan de tabel [$session.lignes] (regel 31);
regels 49-56: de methode [supprimerLigne] zorgt ervoor dat een regel uit de tabel [$session.lignes] wordt verwijderd. Deze verwijdering heeft standaard geen invloed op de weergave van de tabel HTML. De de elementen van [$session] zijn niet responsief: wijzigingen worden niet doorgevoerd in de componenten die er gebruik van maken. Om deze reden vraagt de component [Table] aan zijn bovenliggende component om hem opnieuw te genereren via de gebeurtenis [updateTable] (regel 55). We hebben gezien dat de bovenliggende component vervolgens het attribuut [:key] van de component [Table] verhoogt om de hergeneratie ervan af te dwingen;
regels 58-65: de methode [rechargerListe] vraagt het object [$session] om de tabel [$session.lignes] opnieuw te genereren. Om dezelfde reden als hierboven verandert deze wijziging van [$session.liste] standaard niets aan de weergave van de tabel HTML. Om deze reden vraagt de component [Table] aan zijn bovenliggende component om hem opnieuw te genereren via de gebeurtenis [updateTable] (regel 64).

15.6. Uitvoering van het project

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