16. Projekt [vuejs-14]: Die Sitzung reaktiv machen

Wir haben gesehen, dass das im vorherigen Projekt verwendete Objekt [session] nicht reaktive Eigenschaften hatte: Wenn man diese ändert, werden die Ansichten, die diese Eigenschaften verwenden, nicht aktualisiert. Es ist möglich, ein reaktives Objekt [session] zu erhalten, wenn man es in den reaktiven Daten der Ansichten speichert. Dies wird im Projekt [vuejs-14] veranschaulicht.

Die Projektstruktur sieht wie folgt aus:

16.1. Das Objekt [session]

Das von allen Komponenten gemeinsam genutzte Objekt [session] bleibt unverändert.

16.2. Das Plugin [./plugins/pluginSession]

Das Skript [pluginSession] bleibt unverändert. Das gemeinsam genutzte Objekt [session] ist in der Eigenschaft [$session] aller Komponenten verfügbar.

16.3. Das Hauptskript [main.js]

Das Hauptskript [main.js] bleibt unverändert.

16.4. Die Hauptansicht [App]

Die Ansicht [App] sieht nun wie folgt aus:

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

<script>
import Table from "./components/Table";
export default {
  // Name
  name: "app",
  // Komponenten
  components: {
    Table
  },
  // Lebenszyklus
  created() {
    // Erstellung der Simulationstabelle
    this.$session.generateLignes();
  }
};
</script>

Anmerkungen

• Zeile 9: Die Komponente [Table] löst das Ereignis [updateTable] nicht mehr aus, das die Neugenerierung der Komponente [Table] anfordert. Daher ist die Methode [updateTable] verschwunden;

16.5. Die Komponente [Table]

Die Komponente [Table] entwickelt sich wie folgt:

<template>
  <div>
    <!-- leere Liste -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- Schaltfläche zum Neuladen-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- Liste nicht leer-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- Simulationstabelle -->
      <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 {
  // berechneter Status
  computed: {
    lignes() {
      return this.session.lignes;
    }
  },
  // interner 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 : {}
    };
  },
  // Lebenszyklus
  created(){
    this.session=this.$session
  },
  // Methoden
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // Die Zeile wird entfernt
      this.session.deleteLigne(index);
    },
    // Neuladen der angezeigten Liste
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // Die Liste der Simulationen wird neu generiert
      this.session.generateLignes();
    }
  }
};
</script>

Anmerkungen:

• Die Neuerung betrifft die Zeilen 49–51: Beim Anlegen der Ansicht wird die Sitzung [this.$session] in der Eigenschaft [session] in Zeile 45 gespeichert. An dieser Stelle ist die Eigenschaft [session] reaktiv;
• Zeilen 58 und 65: Anstatt [this.$session] zum Hinzufügen bzw. Löschen einer Zeile aus der Tabelle zu verwenden, wird die reaktive Eigenschaft [this.session] verwendet;

16.6. Ausführung des Projekts

Man erhält dieselben Ergebnisse wie im Projekt [vuejs-12].