15. پروژه [vuejs-13]: به‌روزرسانی یک کامپوننت، با استفاده از یک جلسه

پروژه [vuejs-13] بر پروژه [vuejs-12] بنا شده و تغییر زیر را معرفی می‌کند: جدولی که توسط جدول HTML نمایش داده می‌شود، در ابجکت [session] که برای همه کامپوننت‌ها شناخته‌شده است، تعریف شده است. بنابراین این یک روش اشتراک‌گذاری اطلاعات بین اجزا است. این مفهوم مستقیماً از جلسه وب الهام گرفته شده است. ما از روش پلاگین استفاده می‌کنیم تا این شیء مشترک را در یک ویژگی [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.$session ارجاع داده می‌شود، پارامتر دوم [session] از متد [install] رندر می‌شود
      get: () => session,
    })
  }
}

• خط ۴: شیء مشترک [session] در ویژگی [$session] تمام کامپوننت‌ها در دسترس خواهد بود؛

15.3. اسکریپت اصلی [main.js]

اسکریپت اصلی [main.js] به شرح زیر است:

//وارداتی
import Vue from 'vue'
import App from './App.vue'

//افزونه‌ها
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// بوت‌استرپ
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('#app')

• خطوط 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
  components: {
    Table
  },
  //وضعیت داخلی
  data() {
    return {
      // نسخه جدول
      versionTable: 1
    };
  },

  // روش‌ها
  methods: {
    updateTable() {
      // eslint-disable-next-line
      console.log("App updateTable");
      //افزایش نسخه جدول
      this.versionTable++;
    }
  }
};
</script>

نظرات

• ویوی [App] دیگر آرایه‌ای را که در خط ۹ توسط کامپوننت [Table] نمایش داده می‌شود، مدیریت نمی‌کند؛
• خط ۹: کامپوننت [Table] رویداد [updateTable] را فعال می‌کند که درخواست بازسازی کامپوننت [Table] را می‌دهد. یک راه برای انجام این کار استفاده از ویژگی [:key] است. این ویژگی یک مقدار قابل تغییر دارد. هر بار که تغییر می‌کند، کامپوننت [Table] دوباره تولید می‌شود؛
• خط ۹: مقدار ویژگی [:key] همان ویژگی [versionTable] از خط ۲۷ است. متد [updateTable] (خطوط 33–38) مسئول بازتولید کامپوننت [Table] از خط 9 است. برای این کار، این متد مقدار ویژگی [:key] از کامپوننت [Table] را در خط ۳۷ افزایش می‌دهد. سپس کامپوننت [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] (خطوط ۴، ۱۲، ۱۷) دیگر یک پارامتر تنظیم‌شده توسط کامپوننت والد نیست، بلکه یک ویژگی محاسبه‌شده از کامپوننت [Table] (خطوط ۳۰–۳۲) است. بنابراین [lignes] آرایه [$session.lignes] (خط ۳۱) است؛
• خطوط ۴۹–۵۶: متد [supprimerLigne] باعث حذف یک سطر از جدول [$session.lignes] می‌شود. به‌طور پیش‌فرض، این حذف بر نمایش جدول HTML تأثیری ندارد. این به این دلیل است که عناصر در [$session] واکنش‌گرا نیستند: تغییرات اعمال‌شده بر آن‌ها در کامپوننت‌هایی که از آن‌ها استفاده می‌کنند منعکس نمی‌شود. به همین دلیل، کامپوننت [Table] از والد خود می‌خواهد تا از طریق رویداد [updateTable] آن را مجدداً تولید کند (خط ۵۵). دیده‌ایم که مؤلفهٔ والد سپس ویژگی [:key] مؤلفهٔ [Table] را افزایش می‌دهد تا بازتولید آن را اجباری کند؛
• خطوط ۵۸–۶۵: متد [rechargerListe] به شیء [$session] دستور می‌دهد تا آرایه [$session.lignes] را مجدداً تولید کند. به همان دلیل قبلی، این تغییر در [$session.liste] به‌طور پیش‌فرض نمایش جدول HTML را تغییر نمی‌دهد. به همین دلیل، کامپوننت [Table] از والد خود می‌خواهد تا آن را از طریق رویداد [updateTable] (خط ۶۴) مجدداً تولید کند.

15.6. اجرای پروژه

همان نتایج مشابه پروژه [vuejs-12] به‌دست می‌آید.