17. project [vuejs-15]: gebruik van de plug-in [Vuex]
Het project [vuejs-15] bouwt voort op het project [vuejs-14] door gebruik te maken van een reactief object [session] dat is gegenereerd door [Vuex]. De projectstructuur is als volgt:
17.1. Installatie van de afhankelijkheid [vuex]
17.2. Het script [./session.js]
Het object [session] ziet er als volgt uit:
// Vuex-plugin
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// de sessie is een Vuex-store
const session = new Vuex.Store({
state: {
// de tabel met simulaties
lignes: []
},
mutations: {
// de lijst met simulaties wordt gegenereerd
generateLignes(state) {
// eslint-disable-next-line no-console
console.log("mutation generateLignes");
// we initialiseren [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);
},
// verwijdering van regel nr. index
deleteLigne(state, index) {
// eslint-disable-next-line no-console
console.log("mutation deleteLigne");
// regel nr. wordt verwijderd [index]
state.lignes.splice(index, 1);
}
}
});
// het object exporteren [session]
export default session;
Opmerkingen
- regels 2-4: de plug-in [Vuex] wordt geïntegreerd in het framework [Vue];
- regel 7: de sessie wordt een object van het type [Vuex.Store];
- regels 8-11: de eigenschap [state] bevat de gedeelde status van de applicatie [Vue]. Deze eigenschap is toegankelijk voor alle componenten van de applicatie. Hier delen we de simulatietabel [lignes] (regel 10);
- regels 12-35: de eigenschap [mutations] bevat de methoden die de inhoud van het object [state] wijzigen;
- regels 14-26: de eigenschap [generateLignes] is een functie die een beginwaarde genereert voor de eigenschap [state.lignes]. Deze functie accepteert hier [state] als parameter. Regels 18-23: de eigenschap [state.lignes] wordt geïnitialiseerd;
- regels 28-35: de eigenschap [deleteLigne] is een functie die een regel uit de tabel [state.lignes] verwijdert. De parameters zijn:
- [state], dat het object uit de regels 8-11 vertegenwoordigt;
- [index], het nummer van de te verwijderen regel;
- de functies van de eigenschap [mutations] accepteren altijd als eerste parameter een object dat de eigenschap [state] van regel 8 vertegenwoordigt. De volgende parameters worden geleverd door de code die de mutatie aanroept;
- regel 37: het object [session] wordt geëxporteerd.
In tegenstelling tot het vorige project [vuejs-13] hebben we hier geen plug-in om de sessie toegankelijk te maken voor componenten in een attribuut [Vue.$session].
17.3. Het hoofdscript [./main.js]
Het hoofdscript ziet er als volgt uit:
// imports
import Vue from 'vue'
import App from './App.vue'
// plug-ins
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';
// configuratie
Vue.config.productionTip = false
// projectinstantiëring [App]
new Vue({
name: "app",
// gebruik van Vuex-store
store: session,
render: h => h(App),
}).$mount('#app')
Opmerkingen
- regel 14: de sessie wordt geïmporteerd;
- regel 23: deze wordt doorgegeven aan de hoofdweergave in een attribuut met de naam [store] (dit is verplicht). Dankzij de plug-in [Vuex] wordt dit attribuut vervolgens beschikbaar voor alle componenten in een attribuut [Vue.$store]. We bevinden ons dus in een configuratie die sterk lijkt op die van het vorige project: waar we in een component toegang hadden tot de sessie via de notatie [this.$session], zullen we er nu toegang toe hebben via de notatie [this.$store];
17.4. Het hoofdscherm [App]
Het hoofdscherm [App] verandert als volgt:
<template>
<div class="container">
<b-card>
<!-- bericht -->
<b-alert show variant="success" align="center">
<h4>[vuejs-14] : utilisation du plugin [Vuex]</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.$store.commit("generateLignes");
}
};
</script>
Opmerkingen
- regel 9: de weergave [App] maakt gebruik van de component [Table], maar ontvangt geen gebeurtenissen meer van deze component, omdat de store [Vuex] reactief is;
- regels 24-27: de methode [created] wordt direct na het aanmaken van de component [App] uitgevoerd. Daarin wordt de mutatie met de naam [generateLignes] uitgevoerd, die een beginwaarde voor de simulatietabel genereert. Let op de bijzondere syntaxis van de instructie. Ter herinnering: de notatie [this.$store] verwijst naar de eigenschap [store] van de weergave die is geïnstantieerd in [main.js]:
// weergave instantiëren [App]
new Vue({
name: "app",
// gebruik van Vuex-store
store: session,
render: h => h(App),
}).$mount('#app')
De notatie [this.$store] verwijst dus naar het object [session]. Vervolgens schrijven we [this.$store.commit("generateLignes")] om de mutatie met de naam [generateLignes] uit te voeren. Deze mutatie is een functie;
17.5. De component [Table]
De component [Table] ontwikkelt zich 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 om opnieuw te 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.$store.state.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.$store.commit("deleteLigne", index);
},
// de weergegeven lijst opnieuw laden
rechargerListe() {
// eslint-disable-next-line
console.log("Table rechargerListe");
// de lijst met simulaties wordt opnieuw gegenereerd
this.$store.commit("generateLignes");
}
}
};
</script>
Opmerkingen
- de [template] in de regels 1-24 verandert niet;
- regels 30-32: de berekende eigenschap [lignes] gebruikt nu de [store] van [Vuex];
- regels 49-54: om een regel uit de tabel HTML te verwijderen, wordt de mutatie [deleteLigne] van [store] van [Vuex] gebruikt. Als parameter wordt het nummer [index] van de te verwijderen regel (regel 53) doorgegeven;
- regels 56-61: om de tabel HTML opnieuw te vullen met een nieuwe lijst, gebruiken we de mutatie [generateLignes] van [store] van [Vuex];
17.6. Conclusion
De attributen [Vue.$session] van het project [vuejs-13] en [Vue.$store] van het project [vuejs-15] lijken sterk op elkaar. Ze hebben hetzelfde doel: informatie delen tussen weergaven. Het voordeel van het object [store] is dat het responsief is, terwijl het object [session] dat niet is. Maar het project [vuejs-14] heeft aangetoond dat het eenvoudig is om het object [session] responsief te maken door het te dupliceren in de responsieve eigenschappen van de weergaven.