16. [vuejs-14] projesi: oturumu etkileşimli hale getirme

Önceki projede kullanılan [session] nesnesinin tepkisiz özelliklere sahip olduğunu görmüştük: bu özellikler değiştirildiğinde, bu özellikleri kullanan görünümler güncellenmez. [session] nesnesini görünümlerin tepkisel verilerinde depolarsak, bu nesneyi tepkisel hale getirebiliriz. [vuejs-14] projesi bunu göstermektedir.

Projenin ağaç yapısı şu şekildedir:

16.1. [session] nesnesi

Tüm bileşenler tarafından paylaşılan [session] nesnesi değişmez.

16.2. [./plugins/pluginSession] eklentisi

[pluginSession] komut dosyası değişmez. Paylaşılan [session] nesnesi, tüm bileşenlerin [$session] özelliğinde mevcuttur.

16.3. Ana komut dosyası [main.js]

Ana komut dosyası [main.js] değişmez.

16.4. [App] ana görünümü

[App] görünümü artık şu şekildedir:


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

<script>
import Table from "./components/Table";
export default {
  // ad
  name: "app",
  // bileşenler
  components: {
    Table
  },
  // yaşam döngüsü
  created() {
    // simülasyon tablosunun oluşturulması
    this.$session.generateLignes();
  }
};
</script>

Açıklamalar

9. satır: [Table] bileşeni, [Table] bileşeninin yeniden oluşturulmasını talep eden [updateTable] olayını artık yayınlamıyor. Bunun sonucunda, [updateTable] yöntemi ortadan kalkmıştır;

16.5. [Table] bileşeni

[Table] bileşeni şu şekilde değişmiştir:


<template>
  <div>
    <!-- boş liste -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- yeniden yükleme düğmesi-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- boş olmayan liste-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- simülasyon tablosu -->
      <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 {
  // hesaplanan durum
  computed: {
    lignes() {
      return this.session.lignes;
    }
  },
  // iç durum
  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 : {}
    };
  },
  // yaşam döngüsü
  created(){
    this.session=this.$session
  },
  // yöntemler
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // satır siliniyor
      this.session.deleteLigne(index);
    },
    // görüntülenen listenin yeniden yüklenmesi
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // simülasyon listesi yeniden oluşturuluyor
      this.session.generateLignes();
    }
  }
};
</script>

Açıklamalar:

yeni değişiklik 49-51. satırlarda yer almaktadır: görünüm oluşturulduğunda, [this.$session] oturumu 45. satırdaki [session] özelliğine kaydedilir. Buraya yerleştirildiğinde, [session] özelliği reaktif hale gelir;
58. ve 65. satırlar: Tablodan bir satır eklemek veya silmek için [this.$session] yerine, reaktif [this.session] özelliği kullanılır;

16.6. Projenin çalıştırılması

[vuejs-12] projesinde olduğu gibi aynı sonuçlar elde edilir.