17. پروژه [vuejs-15]: استفاده از افزونه [Vuex]

پروژه [vuejs-15] بر پایه پروژه [vuejs-14] ساخته شده است و از یک شیء واکنشی [session] که توسط [Vuex] تولید شده است، استفاده می‌کند. ساختار پروژه به شرح زیر است:

17.1. نصب وابستگی [vuex]

17.2. اسکریپت [./session.js]

شیء [session] به صورت زیر در می‌آید:

// پلاگین Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

// جلسه یک استور Vuex است
const session = new Vuex.Store({
  state: {
    // آرایه شبیه‌سازی‌ها
    lignes: []
  },
  mutations: {
    // تولید لیست شبیه‌سازی‌ها
    generateLignes(state) {
      // eslint-disable-next-line no-console
      console.log("mutation generateLignes");
      // ابتدایی‌سازی [state.lignes]
      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);
    },
    //حذف شاخص شماره خط
    deleteLigne(state, index) {
      // eslint-disable-next-line no-console
      console.log("mutation deleteLigne");
      // شماره خط حذف شده است [index]
      state.lignes.splice(index, 1);
    }
  }
});
// صادرات شیء [session]
export default session;

نظرات

• خطوط ۲–۴: افزونه [Vuex] در چارچوب [Vue] ادغام می‌شود؛
• خط ۷: جلسه به یک شی از نوع [Vuex.Store] تبدیل می‌شود؛
• خطوط ۸–۱۱: ویژگی [state] شامل وضعیت مشترک برنامه [Vue] است. این ویژگی برای همه اجزای برنامه قابل دسترسی خواهد بود. در اینجا آرایه شبیه‌سازی [lignes] (خط ۱۰) را به اشتراک می‌گذاریم؛
• خطوط ۱۲–۳۵: ویژگی [mutations] شامل متدهایی است که محتوای شیء [state] را تغییر می‌دهند؛
• خطوط ۱۴–۲۶: ویژگی [generateLignes] تابعی است که مقدار اولیه را برای ویژگی [state.lignes] تولید می‌کند. در اینجا، [state] را به‌عنوان پارامتر می‌پذیرد. خطوط ۱۸–۲۳: ویژگی [state.lignes] مقداردهی اولیه می‌شود؛
• خطوط ۲۸–۳۵: ویژگی [deleteLigne] تابعی است که یک سطر را از آرایه [state.lignes] حذف می‌کند. پارامترهای آن عبارتند از:
  • [state]، که نمایانگر شیء خطوط 8–11 است؛
  • [index]، که شماره ردیف مورد نظر برای حذف است؛
• توابع خاصیت [mutations] همیشه به عنوان اولین پارامتر خود، ابجکتی را می‌پذیرند که نمایانگر خاصیت [state] خط 8 است. پارامترهای زیر توسط کدی که تغییر را فراخوانی می‌کند، ارائه می‌شوند؛
• خط ۳۷: شیء [session] صادر می‌شود.

برخلاف پروژه قبلی [vuejs-13]، در اینجا پلاگینی برای در دسترس قرار دادن جلسه برای کامپوننت‌ها از طریق ویژگی [Vue.$session] نخواهیم داشت.

17.3. اسکریپت اصلی [./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';

// پیکربندی
Vue.config.productionTip = false

// ایجاد پروژه [App]
new Vue({
  name: "app",
  // با استفاده از استور Vuex
  store: session,
  render: h => h(App),
}).$mount('#app')

نظرات

• خط ۱۴: جلسه وارد می‌شود؛
• خط ۲۳: این مقدار در یک ویژگی به نام [store] به نمای اصلی ارسال می‌شود (این الزامی است). به لطف افزونه [Vuex]، این ویژگی سپس برای همه اجزا در یک ویژگی به نام [Vue.$store] در دسترس قرار می‌گیرد. بنابراین این پیکربندی بسیار شبیه به پیکربندی پروژه قبلی است: در حالی که در یک کامپوننت ما معمولاً از طریق نشانه [this.$session] به سشن دسترسی داشتیم، اکنون از طریق نشانه [this.$store] به آن دسترسی خواهیم داشت؛

17.4. نما اصلی [App]

نما اصلی [App] به شرح زیر تغییر می‌کند:

<template>
  <div class="container">
    <b-card>
      <!-- پیام -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation du plugin [Vuex]</h4>
      </b-alert>
      <!-- جدول HTML -->
      <Table />
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // نام
  name: "app",
  // کامپوننت‌ها
  components: {
    Table
  },
  //چرخه عمر
  created() {
    //تولید جدول شبیه‌سازی
    this.$store.commit("generateLignes");
  }
};
</script>

توضیحات

• خط ۹: نمای [App] از کامپوننت [Table] استفاده می‌کند اما دیگر رویدادها را از آن دریافت نمی‌کند، زیرا استور [Vuex] واکنشی است؛
• خطوط ۲۴–۲۷: متد [created] بلافاصله پس از ایجاد کامپوننت [App] اجرا می‌شود. در این متد، ماتیون [generateLignes] اجرا می‌شود که مقدار اولیه آرایه شبیه‌سازی را تولید می‌کند. به نحو خاص دستور توجه کنید. شایان ذکر است که نشانه [this.$store] به خصوصیت [store] از view که در [main.js] instantiated شده است، اشاره دارد:

// نمونه‌سازی نما [App]
new Vue({
  name: "app",
  // استفاده از استور Vuex
  store: session,
  render: h => h(App),
}).$mount('#app')

بنابراین نشانه [this.$store] به شیء [session] اشاره می‌کند. سپس برای اجرای تغییر نام‌گذاری‌شده [generateLignes]، می‌نویسیم [this.$store.commit("generateLignes")]. این تغییر یک تابع است؛

17.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.$store.state.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.$store.commit("deleteLigne", index);
    },
    // بارگذاری مجدد لیست نمایش داده شده
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // بازتولید لیست شبیه‌سازی‌ها
      this.$store.commit("generateLignes");
    }
  }
};
</script>

توضیحات

• [template] در خطوط ۱–۲۴ بدون تغییر باقی می‌ماند؛
• خطوط ۳۰–۳۲: ویژگی محاسباتی [lignes] اکنون از [store] در [Vuex] استفاده می‌کند؛
• خطوط ۴۹–۵۴: برای حذف یک سطر از جدول HTML، از مبدل [deleteLigne] که از [store] در [Vuex] گرفته شده است، استفاده می‌شود. شماره [index] ردیف حذف‌شدنی (ردیف ۵۳) به‌عنوان پارامتر ارسال می‌شود؛
• خطوط ۵۶–۶۱: برای بارگذاری مجدد جدول HTML با یک لیست جدید، از جهش [generateLignes] از [store] در [Vuex] استفاده می‌کنیم؛

17.6. Conclusion

ویژگی‌های [Vue.$session] از پروژه [vuejs-13] و [Vue.$store] از پروژه [vuejs-15] بسیار شبیه به هم هستند. آنها یک هدف مشترک را دنبال می‌کنند: به اشتراک‌گذاری اطلاعات بین ویو‌ها. مزیت شیء [store] این است که واکنش‌گرا است، در حالی که شیء [session] واکنش‌گرا نیست. با این حال، پروژه [vuejs-14] نشان داد که واکنش‌گرا کردن شیء [session] با کپی کردن آن در ویژگی‌های واکنش‌گرای ویوها، کار ساده‌ای است.