17. Progetto [vuejs-15]: utilizzo del plugin [Vuex]

Il progetto [vuejs-15] riprende il progetto [vuejs-14] utilizzando un oggetto reattivo [session] generato da [Vuex]. La struttura ad albero del progetto è la seguente:

17.1. Installazione della dipendenza [vuex]

17.2. Lo script [./session.js]

L'oggetto [session] diventa il seguente:


// plugin Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

// la sessione è uno store Vuex
const session = new Vuex.Store({
  state: {
    // la tabella delle simulazioni
    lignes: []
  },
  mutations: {
    // generazione dell'elenco delle simulazioni
    generateLignes(state) {
      // eslint-disable-next-line no-console
      console.log("mutation generateLignes");
      // si inizializza [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);
    },
    // eliminazione della riga n. indice
    deleteLigne(state, index) {
      // eslint-disable-next-line no-console
      console.log("mutation deleteLigne");
      // si elimina la riga n. [index]
      state.lignes.splice(index, 1);
    }
  }
});
// esportazione dell'oggetto [session]
export default session;

Commenti

righe 2-4: si integra il plugin [Vuex] nel framework [Vue];
riga 7: la sessione diventa un oggetto di tipo [Vuex.Store];
righe 8-11: la proprietà [state] contiene lo stato condiviso dell’applicazione [Vue]. Questa proprietà sarà accessibile a tutti i componenti dell’applicazione. Qui condividiamo l’array delle simulazioni [lignes] (riga 10);
righe 12-35: la proprietà [mutations] raggruppa i metodi che modificano il contenuto dell’oggetto [state];
righe 14-26: la proprietà [generateLignes] è una funzione che genera un valore iniziale per la proprietà [state.lignes]. Qui accetta [state] come parametro. Righe 18-23: la proprietà [state.lignes] viene inizializzata;
righe 28-35: la proprietà [deleteLigne] è una funzione che rimuove una riga dall'array [state.lignes]. I suoi parametri sono:
- [state], che rappresenta l’oggetto delle righe 8-11;
- [index], che è il numero della riga da eliminare;
le funzioni della proprietà [mutations] accettano sempre come primo parametro un oggetto che rappresenta la proprietà [state] della riga 8. I parametri successivi sono forniti dal codice che chiama la mutazione;
riga 37: viene esportato l’oggetto [session].

A differenza del progetto precedente [vuejs-13], qui non avremo un plugin per rendere la sessione accessibile ai componenti in un attributo [Vue.$session].

17.3. Lo script principale [./main.js]

Lo script principale si evolve come segue:


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

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

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

// sessione
import session from './session';

// configurazione
Vue.config.productionTip = false

// istanziazione progetto [App]
new Vue({
  name: "app",
  // utilizzo dello store di Vuex
  store: session,
  render: h => h(App),
}).$mount('#app')

Commenti

riga 14: la sessione viene importata;
riga 23: viene trasferita alla vista principale in un attributo denominato [store] (è obbligatorio). Grazie al plugin [Vuex], questo attributo diventa quindi disponibile per tutti i componenti in un attributo [Vue.$store]. Ci troviamo quindi in una configurazione molto simile a quella del progetto precedente: laddove in un componente si accedeva alla sessione tramite la notazione [this.$session], ora vi si accederà tramite la notazione [this.$store];

17.4. La vista principale [App]

La vista principale [App] si evolve come segue:


<template>
  <div class="container">
    <b-card>
      <!-- messaggio -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation du plugin [Vuex]</h4>
      </b-alert>
      <!-- tabella HTML -->
      <Table />
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // nome
  name: "app",
  // componenti
  components: {
    Table
  },
  // ciclo di vita
  created() {
    // generazione della tabella delle simulazioni
    this.$store.commit("generateLignes");
  }
};
</script>

Commenti

riga 9: la vista [App] utilizza il componente [Table] ma non riceve più eventi da esso, grazie al fatto che lo store [Vuex] è reattivo;
righe 24-27: il metodo [created] viene eseguito subito dopo la creazione del componente [App]. All’interno di quest’ultimo viene eseguita la mutazione denominata [generateLignes], che genera un valore iniziale per l’array delle simulazioni. Si noti la sintassi particolare dell’istruzione. Si ricorda che la notazione [this.$store] fa riferimento alla proprietà [store] della vista istanziata in [main.js]:


// istanziazione vista [App]
new Vue({
  name: "app",
  // utilizzo dello store di Vuex
  store: session,
  render: h => h(App),
}).$mount('#app')

La notazione [this.$store] indica quindi l’oggetto [session]. Si scrive quindi [this.$store.commit("generateLignes")] per eseguire la mutazione denominata [generateLignes]. Questa mutazione è una funzione;

17.5. Il componente [Table]

Il componente [Table] si evolve nel modo seguente:


<template>
  <div>
    <!-- elenco vuoto -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- pulsante di ricaricamento-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- elenco non vuoto-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- tabella delle simulazioni -->
      <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 {
  // stato calcolato
  computed: {
    lignes() {
      return this.$store.state.lignes;
    }
  },
  // stato interno
  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" }
      ]
    };
  },
  // metodi
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // si elimina la riga
      this.$store.commit("deleteLigne", index);
    },
    // ricaricamento dell'elenco visualizzato
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // si rigenera l'elenco delle simulazioni
      this.$store.commit("generateLignes");
    }
  }
};
</script>

Commenti

il [template] delle righe 1-24 non cambia;
righe 30-32: la proprietà calcolata [lignes] utilizza ora il [store] di [Vuex];
righe 49-54: per eliminare una riga dalla tabella HTML, si utilizza la mutazione [deleteLigne] derivata da [store], a sua volta derivata da [Vuex]. Come parametro si passa il numero [index] della riga da eliminare (riga 53);
righe 56-61: per ricaricare la tabella HTML con un nuovo elenco, si utilizza la mutazione [generateLignes] derivata da [store], a sua volta derivata da [Vuex];

17.6. Conclusion

Gli attributi [Vue.$session] del progetto [vuejs-13] e [Vue.$store] del progetto [vuejs-15] sono molto simili tra loro. Hanno lo stesso obiettivo: condividere informazioni tra le viste. Il vantaggio dell’oggetto [store] è quello di essere reattivo, mentre l’oggetto [session] non lo è. Tuttavia, il progetto [vuejs-14] ha dimostrato che è facile rendere reattivo l’oggetto [session] duplicandolo nelle proprietà reattive delle viste.