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>

توضیحات

• خط ۹: کامپوننت [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>

توضیحات:

• ویژگی جدید در خطوط ۴۹–۵۱ قرار دارد: هنگامی که نما ایجاد می‌شود، جلسه [this.$session] در ویژگی [session] در خط ۴۵ ذخیره می‌شود. در اینجا قرار گرفته، ویژگی [session] واکنش‌گرا است؛
• خطوط ۵۸ و ۶۵: به جای استفاده از [this.$session] برای افزودن یا حذف یک سطر از جدول، از ویژگی واکنشی [this.session] استفاده می‌شود؛

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

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