16. Proyecto [vuejs-14]: hacer que la sesión sea reactiva

Hemos visto que el objeto [session] utilizado en el proyecto anterior tenía propiedades no reactivas: si se modifican, las vistas que utilizan estas propiedades no se actualizan. Es posible tener un objeto [session] reactivo si se almacena en los datos reactivos de las vistas. Esto es lo que muestra el proyecto [vuejs-14].

La estructura del proyecto es la siguiente:

16.1. El objeto [session]

El objeto [session], compartido por todos los componentes, no cambia.

16.2. El complemento [./plugins/pluginSession]

El script [pluginSession] no cambia. El objeto compartido [session] está disponible en la propiedad [$session] de todos los componentes.

16.3. El script principal [main.js]

El script principal [main.js] no cambia.

16.4. La vista principal [App]

La vista [App] es ahora la siguiente:

<template>
  <div class="container">
    <b-card>
      <!-- mensaje -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation d'un objet partagé entre composants</h4>
      </b-alert>
      <!-- tabla HTML -->
      <Table/>
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // nombre
  name: "app",
  // componentes
  components: {
    Table
  },
  // ciclo de vida
  created() {
    // generación de la tabla de simulaciones
    this.$session.generateLignes();
  }
};
</script>

Comentarios

• línea 9: el componente [Table] ya no emite el evento [updateTable] que solicita que se regenere el componente [Table]. Por lo tanto, el método [updateTable] ha desaparecido;

16.5. El componente [Table]

El componente [Table] evoluciona de la siguiente manera:

<template>
  <div>
    <!-- lista vacía -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- botón de recarga-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- lista no vacía-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- tabla de simulaciones -->
      <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 {
  // estado calculado
  computed: {
    lignes() {
      return this.session.lignes;
    }
  },
  // estado 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 de vida
  created(){
    this.session=this.$session
  },
  // métodos
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // se elimina la línea
      this.session.deleteLigne(index);
    },
    // recarga de la lista mostrada
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // se regenera la lista de simulaciones
      this.session.generateLignes();
    }
  }
};
</script>

Comentarios:

• la novedad se encuentra en las líneas 49-51: cuando se crea la vista, la sesión [this.$session] se almacena en la propiedad [session] de la línea 45. Colocada aquí, la propiedad [session] es reactiva;
• líneas 58 y 65: en lugar de utilizar [this.$session] para añadir o eliminar una línea de la tabla, se utiliza la propiedad reactiva [this.session];

16.6. Ejecución del proyecto

Se obtienen los mismos resultados que en el proyecto [vuejs-12].