15. progetto [vuejs-13]: aggiornamento di un componente, utilizzo di una sessione

Il progetto [vuejs-13] riprende il progetto [vuejs-12] apportando la seguente modifica: la tabella visualizzata dalla tabella HTML è definita in un oggetto [session] noto a tutti i componenti. Si tratta quindi di un modo per condividere informazioni tra i componenti. Questo concetto si ispira direttamente alla sessione web. Utilizziamo il metodo del plugin per rendere disponibile questo oggetto condiviso in un attributo [Vue.$session].

La struttura ad albero del progetto è la seguente:

15.1. L’oggetto [session]

L’oggetto [session], condiviso da tutti i componenti, è definito nello script [./session.js]:


const session = {
  // elenco delle simulazioni
  get lignes() {
    return this._lignes;
  },
  // generazione dell'elenco delle simulazioni
  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 }
      ]
  },
  // eliminazione della riga n. indice
  deleteLigne(index) {
    this._lignes.splice(index, 1);
  }
}
// esportazione dell'oggetto [session]
export default session;

15.2. Il plugin [./plugins/pluginSession]

Lo script [pluginSession] è il seguente:


export default {
  install(Vue, session) {
    // aggiunge una proprietà [$session] alla classe vista
    Object.defineProperty(Vue.prototype, '$session', {
      // quando viene fatto riferimento a Vue.$session viene richiamato, si restituisce il secondo parametro [session] del metodo [install]
      get: () => session,
    })
  }
}

riga 4: l’oggetto condiviso [session] sarà disponibile nella proprietà [$session] di tutti i componenti;

15.3. Lo script principale [main.js]

Lo script principale [main.js] è il seguente:


// 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';
import pluginSession from './plugins/pluginSession'
Vue.use(pluginSession, session)

// configurazione
Vue.config.productionTip = false

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

righe 14-16: il plugin [pluginSession] è integrato nel framework [Vue.js];
dopo la riga 16, l’attributo [$session] è disponibile per tutti i componenti;

15.4. La vista principale [App]

La vista [App] è ora la seguente:


<template>
  <div class="container">
    <b-card>
      <!-- messaggio -->
      <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>
      <!-- tabella HTML -->
      <Table @updateTable="updateTable" :key="versionTable"/>
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // nome
  name: "app",
  // componenti
  components: {
    Table
  },
  // stato interno
  data() {
    return {
      // versione tabella
      versionTable: 1
    };
  },

  // metodi
  methods: {
    updateTable() {
      // eslint-disable-next-line
      console.log("App updateTable");
      // incremento versione tabella
      this.versionTable++;
    }
  }
};
</script>

Commenti

la vista [App] non gestisce più la tabella visualizzata dal componente [Table] della riga 9;
riga 9: il componente [Table] emette l’evento [updateTable] che richiede la rigenerazione del componente [Table]. Un modo per farlo è utilizzare l’attributo [:key]. A questo attributo viene assegnato un valore modificabile. Ogni volta che viene modificato, il componente [Table] viene rigenerato;
riga 9: il valore dell’attributo [:key] è l’attributo [versionTable] della riga 27. Il metodo [updateTable] (righe 33-38) ha il compito di rigenerare il componente [Table] della riga 9. A tal fine, il metodo incrementa il valore dell’attributo [:key] del componente [Table], riga 37. Il componente [Table] viene quindi rigenerato automaticamente;

15.5. Il componente [Table]

Il componente [Table] si evolve come segue:


<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.$session.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.$session.deleteLigne(index);
      // si richiede al componente padre di aggiornare la vista
      this.$emit("updateTable");
    },
    // ricaricamento dell'elenco visualizzato
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // si rigenera l'elenco delle simulazioni
      this.$session.generateLignes();
      // si richiede al componente padre di aggiornare la vista
      this.$emit("updateTable");
    }
  }
};
</script>

Commenti:

l’attributo [lignes] (righe 4, 12, 17) non è più un parametro impostato dal componente padre, ma un attributo calcolato del componente [Table] (righe 30-32). [lignes] è quindi l'array [$session.lignes] (riga 31);
righe 49-56: il metodo [supprimerLigne] provoca l'eliminazione di una riga dalla tabella [$session.lignes]. Per impostazione predefinita, tale eliminazione non modifica la visualizzazione della tabella HTML. Infatti, gli elementi di [$session] non sono reattivi: le loro modifiche non vengono riportate nei componenti che li utilizzano. Per questo motivo, il componente [Table] richiede al proprio genitore di rigenerarlo tramite l’evento [updateTable] (riga 55). Abbiamo visto che il componente padre incrementerà quindi l’attributo [:key] del componente [Table] per forzare la sua rigenerazione;
righe 58-65: il metodo [rechargerListe] richiede all’oggetto [$session] di rigenerare la tabella [$session.lignes]. Per lo stesso motivo di prima, questa modifica di [$session.liste] non altera, per impostazione predefinita, la visualizzazione della tabella HTML. Per questo motivo, il componente [Table] richiede al proprio genitore di rigenerarlo tramite l’evento [updateTable] (riga 64).

15.6. Esecuzione del progetto

Si ottengono gli stessi risultati del progetto [vuejs-12].