16. Progetto [vuejs-14]: rendere la sessione reattiva

Abbiamo visto che l’oggetto [session] utilizzato nel progetto precedente presentava proprietà non reattive: se modificate, le viste che utilizzano tali proprietà non vengono aggiornate. È possibile ottenere un oggetto [session] reattivo se lo si memorizza nei dati reattivi delle viste. È quanto illustra il progetto [vuejs-14].

La struttura ad albero del progetto è la seguente:

16.1. L’oggetto [session]

L’oggetto [session], condiviso da tutti i componenti, rimane invariato.

16.2. Il plugin [./plugins/pluginSession]

Lo script [pluginSession] rimane invariato. L’oggetto condiviso [session] è disponibile nella proprietà [$session] di tutti i componenti.

16.3. Lo script principale [main.js]

Lo script principale [main.js] rimane invariato.

16.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-14] : utilisation d'un objet partagé entre composants</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.$session.generateLignes();
  }
};
</script>

Commenti

• riga 9: il componente [Table] non genera più l'evento [updateTable] che richiede la rigenerazione del componente [Table]. Di conseguenza, il metodo [updateTable] è scomparso;

16.5. Il componente [Table]

Il componente [Table] subisce le seguenti modifiche:

<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" }
      ],
      session : {}
    };
  },
  // ciclo di vita
  created(){
    this.session=this.$session
  },
  // metodi
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // si elimina la riga
      this.session.deleteLigne(index);
    },
    // ricaricamento dell'elenco visualizzato
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // si rigenera l'elenco delle simulazioni
      this.session.generateLignes();
    }
  }
};
</script>

Commenti:

• la novità riguarda le righe 49-51: quando viene creata la vista, la sessione [this.$session] viene memorizzata nella proprietà [session] della riga 45. Inserita in questa posizione, la proprietà [session] è reattiva;
• righe 58 e 65: invece di utilizzare [this.$session] per aggiungere/eliminare una riga dalla tabella, si utilizza la proprietà reattiva [this.session];

16.6. Esecuzione del progetto

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