17. Projekt [vuejs-15]: Verwendung des [Vuex]-Plugins

Das Projekt [vuejs-15] baut auf dem Projekt [vuejs-14] auf, indem es ein reaktives [session]-Objekt verwendet, das von [Vuex] generiert wird. Die Projektstruktur sieht wie folgt aus:

17.1. Installieren der [vuex]-Abhängigkeit

17.2. Das Skript [./session.js]

Das [session]-Objekt sieht nun wie folgt aus:


// plugin Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
 
// la session est un store Vuex
const session = new Vuex.Store({
  state: {
    // le tableau des simulations
    lignes: []
  },
  mutations: {
    // génération de la liste des simulations
    generateLignes(state) {
      // eslint-disable-next-line no-console
      console.log("mutation generateLignes");
      // on initialise [state.lignes]
      state.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 }
        ];
      // eslint-disable-next-line no-console
      console.log(state.lignes);
    },
    // suppression ligne n° index
    deleteLigne(state, index) {
      // eslint-disable-next-line no-console
      console.log("mutation deleteLigne");
      // on supprime la ligne n° [index]
      state.lignes.splice(index, 1);
    }
  }
});
// export de l'objet [session]
export default session;

Kommentare

Zeilen 2–4: Wir integrieren das [Vuex]-Plugin in das [Vue]-Framework;
Zeile 7: Die Session wird zu einem [Vuex.Store]-Objekt;
Zeilen 8–11: Die Eigenschaft [state] enthält den gemeinsamen Status der [Vue]-Anwendung. Auf diese Eigenschaft können alle Komponenten der Anwendung zugreifen. Hier geben wir das Array der Simulationen [lines] frei (Zeile 10);
Zeilen 12–35: Die Eigenschaft [mutations] enthält die Methoden, die den Inhalt des Objekts [state] verändern;
Zeilen 14–26: Die Eigenschaft [generateLines] ist eine Funktion, die einen Anfangswert für die Eigenschaft [state.lines] generiert. Hier nimmt sie [state] als Parameter. Zeilen 18–23: Die Eigenschaft [state.lines] wird initialisiert;
Zeilen 28–35: Die Eigenschaft [deleteLine] ist eine Funktion, die eine Zeile aus dem Array [state.lines] entfernt. Ihre Parameter sind:
- [state], das das Objekt aus den Zeilen 8–11 darstellt;
- [index], die Nummer der zu löschenden Zeile;
Die Funktionen der Eigenschaft [mutations] akzeptieren als ersten Parameter immer ein Objekt, das die Eigenschaft [state] aus Zeile 8 repräsentiert. Die folgenden Parameter werden vom Code bereitgestellt, der die Mutation aufruft;
Zeile 37: Das Objekt [session] wird exportiert.

Anders als im vorherigen Projekt [vuejs-13] gibt es hier kein Plugin, um die Session über ein [Vue.$session]-Attribut für Komponenten zugänglich zu machen.

17.3. Das Hauptskript [./main.js]

Das Hauptskript entwickelt sich wie folgt:


// 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'
 
// session
import session from './session';
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  name: "app",
  // utilisation store de Vuex
  store: session,
  render: h => h(App),
}).$mount('#app')

Kommentare

Zeile 14: Die Sitzung wird importiert;
Zeile 23: Sie wird in einem Attribut namens [store] an die Hauptansicht übergeben (dies ist erforderlich). Dank des [Vuex]-Plugins steht dieses Attribut dann allen Komponenten in einem Attribut [Vue.$store] zur Verfügung. Wir befinden uns daher in einer Konfiguration, die der des vorherigen Projekts sehr ähnlich ist: Wo wir in einer Komponente über die Notation [this.$session] auf die Sitzung zugegriffen haben, greifen wir nun über die Notation [this.$store] darauf zu;

17.4. Die Hauptansicht [App]

Die Hauptansicht der [App] ändert sich wie folgt:


<template>
  <div class="container">
    <b-card>
      <!-- message -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation du plugin [Vuex]</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.$store.commit("generateLignes");
  }
};
</script>

Kommentare

Zeile 9: Die Ansicht [App] verwendet die Komponente [Table], empfängt jedoch keine Ereignisse mehr von ihr, da der [Vuex]-Store reaktiv ist;
Zeilen 24–27: Die Methode [created] wird unmittelbar nach der Erstellung der [App]-Komponente ausgeführt. Innerhalb dieser Methode wird die Funktion [generateLines] aufgerufen, die einen Anfangswert für das Array „simulations“ generiert. Beachten Sie die spezifische Syntax der Anweisung. Erinnern Sie sich daran, dass die Notation [this.$store] auf die Eigenschaft [store] der in [main.js] instanziierten Ansicht verweist:


// instanciation vue [App]
new Vue({
  name: "app",
  // utilisation store de Vuex
  store: session,
  render: h => h(App),
}).$mount('#app')

Die Notation [this.$store] bezieht sich daher auf das [session]-Objekt. Wir schreiben dann [this.$store.commit("generateLines")], um die Mutation namens [generateLines] auszuführen. Diese Mutation ist eine Funktion;

17.5. Die [Table]-Komponente

Die [Table]-Komponente entwickelt sich wie folgt:


<template>
  <div>
    <!-- empty list -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- reload button-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- non-empty list-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- simulation table -->
      <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.$store.state.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" }
      ]
    };
  },
  // méthodes
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // on supprime la ligne
      this.$store.commit("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.$store.commit("generateLignes");
    }
  }
};
</script>

Kommentare

Die [Vorlage] für die Zeilen 1–24 bleibt unverändert;
Zeilen 30–32: Die berechnete Eigenschaft [lignes] verwendet nun den [store] aus [Vuex];
Zeilen 49–54: Um eine Zeile aus der HTML-Tabelle zu entfernen, verwenden wir die Mutation [deleteLigne] des [Vuex] [store]. Wir übergeben die [index]-Nummer der zu entfernenden Zeile als Parameter (Zeile 53);
Zeilen 56–61: Um die HTML-Tabelle mit einer neuen Liste neu zu laden, verwenden wir die Mutation [generateLines] des [Vuex] [store];

17.6. Fazit

Die [Vue.$session]-Attribute im [vuejs-13]-Projekt und die [Vue.$store]-Attribute im [vuejs-15]-Projekt sind sehr ähnlich. Sie dienen demselben Zweck: dem Austausch von Informationen zwischen Views. Der Vorteil des [store]-Objekts besteht darin, dass es reaktiv ist, während das [session]-Objekt dies nicht ist. Das [vuejs-14]-Projekt hat jedoch gezeigt, dass es einfach ist, das [session]-Objekt reaktiv zu machen, indem man es in den reaktiven Eigenschaften der Ansichten dupliziert.