16. Projeto [vuejs-14]: tornar a sessão reativa

Vimos que o objeto [session] utilizado no projeto anterior tinha propriedades não reativas: se as alterarmos, as vistas que utilizam essas propriedades não são atualizadas. É possível ter um objeto [session] reativo se o armazenarmos nos dados reativos das vistas. É isso que demonstra o projeto [vuejs-14].

A estrutura do projeto é a seguinte:

16.1. O objeto [session]

O objeto [session], partilhado por todos os componentes, não sofre alterações.

16.2. O plugin [./plugins/pluginSession]

O script [pluginSession] não sofre alterações. O objeto partilhado [session] está disponível na propriedade [$session] de todos os componentes.

16.3. O script principal [main.js]

O script principal [main.js] não sofre alterações.

16.4. A vista principal [App]

A vista [App] é agora a seguinte:

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

<script>
import Table from "./components/Table";
export default {
  // nome
  name: "app",
  // componentes
  components: {
    Table
  },
  // ciclo de vida
  created() {
    // geração da tabela de simulações
    this.$session.generateLignes();
  }
};
</script>

Comentários

• linha 9: o componente [Table] já não emite o evento [updateTable], que solicita que o componente [Table] seja regenerado. Consequentemente, o método [updateTable] desapareceu;

16.5. O componente [Table]

O componente [Table] sofre as seguintes alterações:

<template>
  <div>
    <!-- lista vazia -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- botão de atualização-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- lista não vazia-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- tabela de simulações -->
      <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);
      // a linha é eliminada
      this.session.deleteLigne(index);
    },
    // recarregamento da lista apresentada
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // regenera a lista de simulações
      this.session.generateLignes();
    }
  }
};
</script>

Comentários:

• a novidade está nas linhas 49-51: quando a vista é criada, a sessão [this.$session] é armazenada na propriedade [session] da linha 45. Colocada aqui, a propriedade [session] é reativa;
• linhas 58 e 65: em vez de utilizar [this.$session] para adicionar/eliminar uma linha da tabela, utiliza-se a propriedade reativa [this.session];

16.6. Execução do projeto

Obteve-se os mesmos resultados que no projeto [vuejs-12].