17. [vuejs-15] projesi: [Vuex] eklentisinin kullanımı

[vuejs-15] projesi, [Vuex] tarafından oluşturulan reaktif bir [session] nesnesini kullanarak [vuejs-14] projesini devralır. Projenin dizin yapısı şöyledir:

17.1. [vuex] bağımlılığının kurulumu

17.2. [./session.js] komut dosyası

[session] nesnesi şu şekilde olur:

// Vuex eklentisi
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

// oturum bir Vuex deposudur
const session = new Vuex.Store({
  state: {
    // simülasyon tablosu
    lignes: []
  },
  mutations: {
    // simülasyon listesinin oluşturulması
    generateLignes(state) {
      // eslint-disable-next-line no-console
      console.log("mutation generateLignes");
      // [state.lignes] başlatılıyor
      state.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 }
        ];
      // eslint-disable-next-line no-console
      console.log(state.lignes);
    },
    // indeks numarası satırının silinmesi
    deleteLigne(state, index) {
      // eslint-disable-next-line no-console
      console.log("mutation deleteLigne");
      // [index] numaralı satır siliniyor
      state.lignes.splice(index, 1);
    }
  }
});
// [session] nesnesinin dışa aktarımı
export default session;

Açıklamalar

• 2-4. satırlar: [Vuex] eklentisi, [Vue] çerçevesine entegre edilir;
• 7. satır: oturum, [Vuex.Store] türünde bir nesneye dönüşür;
• 8-11. satırlar: [state] özelliği, [Vue] uygulamasının paylaşılan durumunu içerir. Bu özelliğe uygulamanın tüm bileşenleri erişebilir. Burada [lignes] simülasyon tablosunu paylaşıyoruz (satır 10);
• satır 12-35: [mutations] özelliği, [state] nesnesinin içeriğini değiştiren yöntemleri bir araya getirir;
• satır 14-26: [generateLignes] özelliği, [state.lignes] özelliği için bir başlangıç değeri üreten bir işlevdir. Burada [state]'i parametre olarak kabul eder. 18-23. satırlar: [state.lignes] özelliği başlatılır;
• 28-35. satırlar: [deleteLigne] özelliği, [state.lignes] dizisinden bir satırı silen bir işlevdir. Parametreleri şunlardır:
  • 8-11. satırlardaki nesneyi temsil eden [state];
  • [index], silinecek satırın numarasıdır;
• [mutations] özelliğinin işlevleri, her zaman ilk parametre olarak 8. satırın [state] özelliğini temsil eden bir nesneyi kabul eder. Aşağıdaki parametreler, değişimi çağıran kod tarafından sağlanır;
• 37. satır: [session] nesnesi dışa aktarılır.

Önceki [vuejs-13] projesinin aksine, burada oturumu bileşenlere [Vue.$session] özniteliği aracılığıyla erişilebilir hale getirecek bir eklenti kullanmayacağız.

17.3. Ana komut dosyası [./main.js]

Ana komut dosyası şu şekilde gelişir:

// 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';

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

// proje oluşturma [App]
new Vue({
  name: "app",
  // Vuex deposunun kullanımı
  store: session,
  render: h => h(App),
}).$mount('#uygulama')

Açıklamalar

• 14. satır: oturum içe aktarılır;
• 23. satır: oturum, [store] adlı bir öznitelik içinde ana görünüme aktarılır (bu zorunludur). [Vuex] eklentisi sayesinde, bu öznitelik tüm bileşenler için [Vue.$store] özniteliği altında kullanılabilir hale gelir. Dolayısıyla, önceki projeninkine çok benzer bir yapıdayız: bir bileşende oturuma [this.$session] notasyonu ile erişilirken, artık [this.$store] notasyonu ile erişilecektir;

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

[App] ana görünümü şu şekilde değişir:

<template>
  <div class="container">
    <b-card>
      <!-- mesaj -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation du plugin [Vuex]</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.$store.commit("generateLignes");
  }
};
</script>

Açıklamalar

• 9. satır: [App] görünümü, [Table] bileşenini kullanır ancak artık ondan olay almaz; bunun nedeni, [Vuex] depolama alanının reaktif olmasıdır;
• 24-27. satırlar: [created] yöntemi, [App] bileşeninin oluşturulmasından hemen sonra yürütülür. Bu yöntemde, simülasyon dizisi için bir başlangıç değeri üreten [generateLignes] adlı mutasyon yürütülür. Komutun kendine özgü sözdizimine dikkat edilmelidir. [this.$store] notasyonunun, [main.js] içinde örneklenen görünümün [store] özelliğine atıfta bulunduğu hatırlatılmalıdır:

// [App] görünümünün örneklenmesi
new Vue({
  name: "app",
  // Vuex depolama alanının kullanımı
  store: session,
  render: h => h(App),
}).$mount('#app')

Dolayısıyla [this.$store] notasyonu, [session] nesnesini ifade eder. Ardından, [generateLignes] adlı mutasyonu çalıştırmak için [this.$store.commit("generateLignes")] yazılır. Bu mutasyon bir işlevdir;

17.5. [Table] bileşeni

[Table] bileşeni şu şekilde geliş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.$store.state.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.$store.commit("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.$store.commit("generateLignes");
    }
  }
};
</script>

Açıklamalar

• 1-24. satırlardaki [template] değişmez;
• 30-32. satırlar: hesaplanan özellik [lignes] artık [Vuex]'ten gelen [store]'i kullanmaktadır;
• 49-54. satırlar: HTML tablosundan bir satırı silmek için, [Vuex]'ten gelen [store]'in [deleteLigne] mutasyonu kullanılır. Silinecek satırın [index] numarası (satır 53) parametre olarak verilir;
• satır 56-61: HTML tablosunu yeni bir listeyle yeniden yüklemek için, [Vuex]'ten [store]'e ve oradan da [generateLignes]'e dönüşüm kullanılır;

17.6. Conclusion

[vuejs-15] projesindeki [Vue.$store] ve [vuejs-13] projesindeki [Vue.$session] öznitelikleri birbirine çok benzemektedir. Her ikisi de aynı amaca yöneliktir: görünümler arasında bilgi paylaşımı. [store] nesnesinin avantajı, tepkisel olmasıdır; oysa [session] nesnesi tepkisel değildir. Ancak [vuejs-14] projesi, [session] nesnesini görünümlerin reaktif özelliklerine kopyalayarak reaktif hale getirmenin kolay olduğunu göstermiştir.