15. مشروع [vuejs-13]: تحديث مكون، استخدام جلسة عمل

يستند المشروع [vuejs-13] إلى المشروع [vuejs-12] مع إدخال التعديل التالي: يتم تعريف الجدول الذي تعرضه القاعدة HTML في كائن [session] معروف لجميع المكونات. وهذه طريقة لتبادل المعلومات بين المكونات. وقد استُوحِي هذا المفهوم مباشرةً من جلسة الويب. ونستخدم طريقة المكون الإضافي (plugin) لإتاحة هذا الكائن المشترك في سمة [Vue.$session].

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

15.1. الكائن [session]

الكائن [session] الذي تشترك فيه جميع المكونات محدد في البرنامج النصي [./session.js]:

const session = {
  // قائمة عمليات المحاكاة
  get lignes() {
    return this._lignes;
  },
  // إنشاء قائمة عمليات المحاكاة
  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 }
      ]
  },
  // حذف السطر رقم الفهرس
  deleteLigne(index) {
    this._lignes.splice(index, 1);
  }
}
// تصدير الكائن [session]
export default session;

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

النص البرمجي [pluginSession] هو كما يلي:

export default {
  install(Vue, session) {
    // إضافة خاصية [$session] إلى فئة العرض
    Object.defineProperty(Vue.prototype, '$session', {
      // عندما يتم الإشارة إلى Vue.يتم الإشارة إلى Vue.$session، يتم عرض المعلمة الثانية [session] للطريقة [install]
      get: () => session,
    })
  }
}

• السطر 4: سيكون الكائن المشترك [session] متاحًا في الخاصية [$session] لجميع المكونات؛

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

النص البرمجي الرئيسي [main.js] هو كما يلي:

// imports
import Vue from 'vue'
import App from './App.vue'

// المكونات الإضافية
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

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

// الجلسة
import session from './session';
import pluginSession from './plugins/pluginSession'
Vue.use(pluginSession, session)

// التكوين
Vue.config.productionTip = false

// إنشاء مثيل لمشروع [App]
new Vue({
  name: "app",
  render: h => h(App),
}).$mount('#التطبيق')

• الأسطر 14-16: تم دمج المكون الإضافي [pluginSession] في إطار العمل [Vue.js]؛
• بعد السطر 16، يصبح السمة [$session] متاحة لجميع المكونات؛

15.4. الطريقة الرئيسية [App]

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

<template>
  <div class="container">
    <b-card>
      <!-- رسالة -->
      <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>
      <!-- جدول HTML -->
      <Table @updateTable="updateTable" :key="versionTable"/>
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // الاسم
  name: "app",
  // المكونات
  components: {
    Table
  },
  // الحالة الداخلية
  data() {
    return {
      // إصدار الجدول
      versionTable: 1
    };
  },

  // الأساليب
  methods: {
    updateTable() {
      // eslint-disable-next-line
      console.log("App updateTable");
      // زيادة رقم إصدار الجدول
      this.versionTable++;
    }
  }
};
</script>

تعليقات

• لم تعد طريقة العرض [App] تدير الجدول الذي يعرضه المكون [Table] في السطر 9؛
• السطر 9: يُصدر المكون [Table] الحدث [updateTable] الذي يطلب إعادة إنشاء المكون [Table]. إحدى طرق القيام بذلك هي استخدام السمة [:key]. تُعطى هذه السمة قيمة قابلة للتعديل. في كل مرة يتم تعديلها، يتم إعادة إنشاء المكون [Table]؛
• السطر 9: قيمة السمة [:key] هي السمة [versionTable] الموجودة في السطر 27. تتولى الطريقة [updateTable] (الأسطر 33-38) إعادة إنشاء المكون [Table] الموجود في السطر 9. ولتحقيق ذلك، تقوم الطريقة بزيادة قيمة السمة [:key] للمكون [Table]، السطر 37. وعندئذ يتم إعادة إنشاء المكون [Table] تلقائيًا؛

15.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" }
      ]
    };
  },
  // الأساليب
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // يتم حذف السطر
      this.$session.deleteLigne(index);
      // يُطلب من المكون الأصلي تحديث العرض
      this.$emit("updateTable");
    },
    // إعادة تحميل القائمة المعروضة
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // إعادة إنشاء قائمة عمليات المحاكاة
      this.$session.generateLignes();
      // يُطلب من المكون الأصلي تحديث العرض
      this.$emit("updateTable");
    }
  }
};
</script>

تعليقات:

• لم يعد السمة [lignes] (الأسطر 4 و12 و17) معلمة محددة من قبل المكون الأصلي، بل أصبحت سمة محسوبة من المكون [Table] (الأسطر 30-32). وبالتالي، فإن [lignes] هو المصفوفة [$session.lignes] (السطر 31)؛
• الأسطر 49-56: تؤدي الطريقة [supprimerLigne] إلى حذف سطر من الجدول [$session.lignes]. ولا يؤثر هذا الحذف، بشكل افتراضي، على عرض الجدول HTML. ففي الواقع، عناصر [$session] غير تفاعلية: لا تنعكس تعديلاتها على المكونات التي تستخدمها. ولهذا السبب، تطلب المكونة [Table] من المكونة الأم إعادة إنشائها باستخدام الحدث [updateTable] (السطر 55). وقد رأينا أن المكون الأصلي سيقوم عندئذ بزيادة قيمة السمة [:key] للمكون [Table] لإجباره على إعادة التوليد؛
• الأسطر 58-65: تطلب الطريقة [rechargerListe] من الكائن [$session] إعادة إنشاء المصفوفة [$session.lignes]. وللسبب نفسه المذكور سابقًا، لا يؤدي هذا التعديل على [$session.liste]، بشكل افتراضي، إلى تغيير عرض الجدول HTML. ولهذا السبب، يطلب المكون [Table] من المكون الأصلي إعادة إنشائه باستخدام الحدث [updateTable] (السطر 64).

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

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