15. [vuejs-13] projesi: bir bileşenin güncellenmesi, oturum kullanımı

[vuejs-13] projesi, [vuejs-12] projesini temel alarak şu değişikliği getirir: HTML tablosu tarafından görüntülenen tablo, tüm bileşenler tarafından tanınan bir [session] nesnesinde tanımlanır. Dolayısıyla bu, bileşenler arasında bilgi paylaşımının bir yoludur. Bu kavram, doğrudan web oturumundan esinlenmiştir. Bu paylaşılan nesneyi bir [Vue.$session] özniteliğinde kullanılabilir hale getirmek için eklenti yöntemini kullanıyoruz.

Projenin dizin yapısı şu şekildedir:

15.1. [session] nesnesi

Tüm bileşenler tarafından paylaşılan [session] nesnesi, [./session.js] komut dosyasında tanımlanmıştır:


const session = {
  // simülasyon listesi
  get lignes() {
    return this._lignes;
  },
  // simülasyon listesinin oluşturulması
  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 }
      ]
  },
  // indeks numaralı satırın silinmesi
  deleteLigne(index) {
    this._lignes.splice(index, 1);
  }
}
// [session] nesnesinin dışa aktarılması
export default session;

15.2. [./plugins/pluginSession] eklentisi

[pluginSession] komut dosyası şu şekildedir:


export default {
  install(Vue, session) {
    // görünüm sınıfına [$session] özelliğini ekler
    Object.defineProperty(Vue.prototype, '$session', {
      // Vue.$session referanslandığında, [install] yönteminin 2. parametresi [session] olarak döndürülür
      get: () => session,
    })
  }
}

4. satır: [session] paylaşılan nesnesi, tüm bileşenlerin [$session] özelliğinde kullanılabilir olacaktır;

15.3. Ana komut dosyası [main.js]

Ana komut dosyası [main.js] şu şekildedir:


// ithalatları
import Vue from 'vue'
import App from './App.vue'

// eklentiler
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// oturum
import session from './session';
import pluginSession from './plugins/pluginSession'
Vue.use(pluginSession, session)

// yapılandırma
Vue.config.productionTip = false

// proje örneği [App]
new Vue({
  name: "app",
  render: h => h(App),
}).$mount('#uygulama')

14-16. satırlar: [pluginSession] eklentisi, [Vue.js] çerçevesine entegre edilmiştir;
16. satırdan sonra, [$session] özniteliği tüm bileşenler için kullanılabilir;

15.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-13] : mise à jour d'un composant, partage des données avec une session</h4>
      </b-alert>
      <!-- tablo HTML -->
      <Table @updateTable="updateTable" :key="versionTable"/>
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // ad
  name: "app",
  // bileşenler
  components: {
    Table
  },
  // iç durum
  data() {
    return {
      // tablo sürümü
      versionTable: 1
    };
  },

  // yöntemler
  methods: {
    updateTable() {
      // eslint-disable-next-line
      console.log("App updateTable");
      // sürüm tablosu artış
      this.versionTable++;
    }
  }
};
</script>

Açıklamalar

[App] görünümü artık 9. satırdaki [Table] bileşeni tarafından görüntülenen tabloyu yönetmiyor;
9. satır: [Table] bileşeni, [Table] bileşeninin yeniden oluşturulmasını talep eden [updateTable] olayını tetikler. Bunu yapmanın bir yolu, [:key] özniteliğini kullanmaktır. Bu özniteliğe değiştirilebilir bir değer atanır. Her değiştirildiğinde, [Table] bileşeni yeniden oluşturulur;
9. satır: [:key] özniteliğinin değeri, 27. satırdaki [versionTable] özniteliğidir. [updateTable] yöntemi (satır 33-38), 9. satırdaki [Table] bileşenini yeniden oluşturmakla görevlidir. Bunun için yöntem, 37. satırdaki [Table] bileşeninin [:key] özniteliğinin değerini artırır. Bunun üzerine [Table] bileşeni otomatik olarak yeniden oluşturulur;

15.5. [Table] bileşeni

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


<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" }
      ]
    };
  },
  // yöntemler
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // satır siliniyor
      this.$session.deleteLigne(index);
      // üst bileşene görünümü güncellemesi istenir
      this.$emit("updateTable");
    },
    // görüntülenen listenin yeniden yüklenmesi
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // simülasyon listesi yeniden oluşturulur
      this.$session.generateLignes();
      // üst bileşene görünümü güncellemesi istenir
      this.$emit("updateTable");
    }
  }
};
</script>

Açıklamalar:

[lignes] özniteliği (satır 4, 12, 17), artık üst bileşen tarafından belirlenen bir parametre değil, [Table] bileşeninin hesaplanan bir özniteliğidir (satır 30-32). Dolayısıyla [lignes], [$session.lignes] tablosudur (satır 31);
49-56. satırlar: [supprimerLigne] yöntemi, [$session.lignes] tablosundan bir satırı siler. Bu silme işlemi, varsayılan olarak HTML tablosunun görünümünü değiştirmez. Zira, [$session] tablosundaki öğeler etkileşimli değildir: bu öğelerdeki değişiklikler, onları kullanan bileşenlere yansıtılmaz. Bu nedenle, [Table] bileşeni, [updateTable] olayı aracılığıyla üst bileşenden kendini yeniden oluşturmasını ister olarak yeniden oluşturulmasını ister (55. satır). Daha önce gördüğümüz gibi, üst bileşen bu durumda [Table] bileşeninin [:key] özniteliğini artırarak yeniden oluşturulmasını zorlar;
58-65. satırlar: [rechargerListe] yöntemi, [$session] nesnesinden [$session.lignes] tablosunu yeniden oluşturmasını ister. Yukarıdakiyle aynı nedenden ötürü, [$session.liste]'teki bu değişiklik, varsayılan olarak HTML tablosunun görüntülenmesini değiştirmez. Bu nedenle, [Table] bileşeni, [updateTable] olayı aracılığıyla (64. satır) üst bileşenden kendisini yeniden oluşturmasını ister.

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

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