15. Projekt [vuejs-13]: Aktualisierung einer Komponente, Verwendung einer Sitzung

Das Projekt [vuejs-13] basiert auf dem Projekt [vuejs-12] und weist folgende Änderung auf: Die von der Tabelle HTML angezeigte Tabelle ist in einem Objekt [session] definiert, das allen Komponenten bekannt ist. Dies ist also eine Möglichkeit, Informationen zwischen Komponenten auszutauschen. Dieses Konzept ist direkt von der Web-Sitzung inspiriert. Wir nutzen die Plugin-Methode, um dieses gemeinsam genutzte Objekt in einem Attribut [Vue.$session] verfügbar zu machen.

Die Projektstruktur sieht wie folgt aus:

15.1. Das Objekt [session]

Das von allen Komponenten gemeinsam genutzte Objekt [session] wird im Skript [./session.js] definiert:


const session = {
  // Liste der Simulationen
  get lignes() {
    return this._lignes;
  },
  // Erstellung der Simulationsliste
  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 }
      ]
  },
  // Löschen der Zeile mit dem Index
  deleteLigne(index) {
    this._lignes.splice(index, 1);
  }
}
// Export des Objekts [session]
export default session;

15.2. Das Plugin [./plugins/pluginSession]

Das Skript [pluginSession] lautet wie folgt:


export default {
  install(Vue, session) {
    // Fügt der Ansichtsklasse eine Eigenschaft [$session] hinzu
    Object.defineProperty(Vue.prototype, '$session', {
      // Wenn auf die Ansicht$session referenziert wird, wird der zweite Parameter [session] der Methode [install]
      get: () => session,
    })
  }
}

Zeile 4: Das gemeinsam genutzte Objekt [session] steht in der Eigenschaft [$session] aller Komponenten zur Verfügung;

15.3. Das Hauptskript [main.js]

Das Hauptskript [main.js] lautet wie folgt:


// Importe
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'

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

// Konfiguration
Vue.config.productionTip = false

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

Zeilen 14–16: Das Plugin [pluginSession] wird in das Framework [Vue.js] integriert;
Nach Zeile 16 steht das Attribut [$session] für alle Komponenten zur Verfügung;

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

<script>
import Table from "./components/Table";
export default {
  // Name
  name: "app",
  // Komponenten
  components: {
    Table
  },
  // interner Status
  data() {
    return {
      // Tabellenversion
      versionTable: 1
    };
  },

  // Methoden
  methods: {
    updateTable() {
      // eslint-disable-next-line
      console.log("App updateTable");
      // Versionsinkrement der Tabelle
      this.versionTable++;
    }
  }
};
</script>

Anmerkungen

Die Ansicht [App] verwaltet nun nicht mehr die Tabelle, die von der Komponente [Table] in Zeile 9 angezeigt wird;
Zeile 9: Die Komponente [Table] löst das Ereignis [updateTable] aus, das die Neugenerierung der Komponente [Table] anfordert. Eine Möglichkeit hierfür ist die Verwendung des Attributs [:key]. Diesem Attribut wird ein veränderbarer Wert zugewiesen. Bei jeder Änderung wird die Komponente [Table] neu generiert;
Zeile 9: Der Wert des Attributs [:key] ist das Attribut [versionTable] aus Zeile 27. Die Methode [updateTable] (Zeilen 33–38) ist dafür zuständig, die Komponente [Table] aus Zeile 9 neu zu generieren. Dazu erhöht die Methode den Wert des Attributs [:key] der Komponente [Table] in Zeile 37. Die Komponente [Table] wird daraufhin automatisch neu generiert;

15.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 „Neu laden“-->
      <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" }
      ]
    };
  },
  // Methoden
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // Die Zeile wird entfernt
      this.$session.deleteLigne(index);
      // die übergeordnete Komponente wird aufgefordert, die Ansicht zu aktualisieren
      this.$emit("updateTable");
    },
    // Neuladen der angezeigten Liste
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // Die Liste der Simulationen wird neu generiert
      this.$session.generateLignes();
      // Die übergeordnete Komponente wird aufgefordert, die Ansicht zu aktualisieren
      this.$emit("updateTable");
    }
  }
};
</script>

Anmerkungen:

Das Attribut [lignes] (Zeilen 4, 12, 17) ist kein von der übergeordneten Komponente festgelegter Parameter mehr, sondern ein berechnetes Attribut der Komponente [Table] (Zeilen 30–32). [lignes] ist somit das Array [$session.lignes] (Zeile 31);
Zeilen 49–56: Die Methode [supprimerLigne] bewirkt, dass eine Zeile aus der Tabelle [$session.lignes] gelöscht wird. Diese Löschung hat standardmäßig keine Auswirkungen auf die Anzeige der Tabelle HTML. Denn sind die Elemente von [$session] nicht reaktiv: Ihre Änderung wird nicht auf die Komponenten übertragen, die sie verwenden. Aus diesem Grund fordert die Komponente [Table] ihre übergeordnete Komponente auf, sie mithilfe des Ereignisses [updateTable] (Zeile 55). Wir haben gesehen, dass die übergeordnete Komponente daraufhin das Attribut [:key] der Komponente [Table] erhöht, um deren Neugenerierung zu erzwingen;
Zeilen 58–65: Die Methode [rechargerListe] fordert das Objekt [$session] auf, das Array [$session.lignes] neu zu generieren. Aus demselben Grund wie zuvor ändert diese Änderung an [$session.liste] standardmäßig nichts an der Anzeige der Tabelle HTML. Aus diesem Grund fordert die Komponente [Table] ihr übergeordnetes Objekt über das Ereignis [updateTable] (Zeile 64) auf, sie neu zu generieren.

15.6. Ausführung des Projekts

Es werden dieselben Ergebnisse wie im Projekt [vuejs-12] erzielt.