16. المشروع [vuejs-14]: جعل الجلسة تفاعلية

لقد رأينا أن الكائن [session] المستخدم في المشروع السابق كان يحتوي على خصائص غير تفاعلية: فإذا تم تعديلها، لا يتم تحديث العروض التي تستخدم هذه الخصائص. من الممكن الحصول على كائن [session] تفاعلي إذا تم تخزينه في البيانات التفاعلية للعروض. وهذا ما يوضحه المشروع [vuejs-14].

هيكل المشروع كالتالي:

16.1. الكائن [session]

الكائن [session] المشترك بين جميع المكونات لا يتغير.

16.2. المكوّن الإضافي [./plugins/pluginSession]

لا يتغير البرنامج النصي [pluginSession]. الكائن المشترك [session] متاح في الخاصية [$session] لجميع المكونات.

16.3. النص البرمجي الرئيسي [main.js]

لا يتغير البرنامج النصي الرئيسي [main.js].

16.4. العرض الرئيسي [App]

أصبحت طريقة العرض [App] كما يلي:

<template>
  <div class="container">
    <b-card>
      <!-- رسالة -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation d'un objet partagé entre composants</h4>
      </b-alert>
      <!-- جدول HTML -->
      <Table/>
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // الاسم
  name: "app",
  // المكونات
  components: {
    Table
  },
  // دورة الحياة
  created() {
    // إنشاء جدول المحاكاة
    this.$session.generateLignes();
  }
};
</script>

تعليقات

• السطر 9: لم يعد المكون [Table] يُصدر الحدث [updateTable] الذي يطلب إعادة إنشاء المكون [Table]. ونتيجة لذلك، اختفت الطريقة [updateTable]؛

16.5. المكون [Table]

يتطور المكون [Table] على النحو التالي:

<template>
  <div>
    <!-- قائمة فارغة -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- زر إعادة التحميل-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- قائمة غير فارغة-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- جدول المحاكاة -->
      <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 {
  // الحالة المحسوبة
  computed: {
    lignes() {
      return this.session.lignes;
    }
  },
  // الحالة الداخلية
  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 : {}
    };
  },
  // دورة الحياة
  created(){
    this.session=this.$session
  },
  // الأساليب
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // يتم حذف السطر
      this.session.deleteLigne(index);
    },
    // إعادة تحميل القائمة المعروضة
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // إعادة إنشاء قائمة المحاكاة
      this.session.generateLignes();
    }
  }
};
</script>

تعليقات:

• الجديد هو الأسطر 49-51: عند إنشاء العرض، يتم تخزين الجلسة [this.$session] في الخاصية [session] في السطر 45. وبوضعها هنا، تصبح الخاصية [session] تفاعلية؛
• السطران 58 و65: بدلاً من استخدام [this.$session] لإضافة/حذف سطر من الجدول، يتم استخدام الخاصية التفاعلية [this.session]؛

16.6. تنفيذ المشروع

نحصل على نفس النتائج كما في المشروع [vuejs-12].