آشنایی با Getterها در VueX

Getters in VueX

Vue.JS 2: آشنایی با Getter ها در VueX - قسمت 90

در جلسه قبل از یک فایل مرکزی برای state management استفاده کردیم اما به شما گفتم که این روش به تنهایی باعث ایجاد مشکلاتی می شود. این مشکلات از نوع مشکلاتی نیستند که جلوی کارکرد برنامه را بگیرند یا برنامه را از بیخ و بن خراب کنند اما برای یک برنامه نویس مسئول و متعهد مشکلی جدی هستند. همانطور که می دانید ما شمارنده یا همان counter را درون فایلی به نام Result.vue نمایش می دهیم اما درون پوشه components یک فایل جدید به نام AnotherResult.vue بسازید. محتوای این فایل باید به شکل زیر باشد:

<template>
  <p>Counter is: {{ counter }}</p>
</template>

<script>
export default {
  computed: {
    counter() {
      return this.$store.state.counter * 2;
    }
  }
};
</script>

یعنی counter را در 2 ضرب کرده و سپس نمایش می دهیم. همین کار را در فایل Result.vue نیز انجام بدهید تا آن هم شمارنده را در 2 ضرب کرده و سپس نمایش دهد:

<template>
  <p>Counter is: {{ counter }}</p>
</template>

<script>
export default {
  computed: {
    counter() {
      return this.$store.state.counter * 2;
    }
  }
};
</script>

همانطور که می بینید کدهای این دو فایل دقیقا یکی است و هیچ تفاوتی ندارند. حالا به App.vue می رویم تا کامپوننت AnotherResult.vue را نیز در آن وارد کرده و نمایش بدهیم:

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <h1>Vuex</h1>
        <app-result></app-result>
        <app-another-result></app-another-result>
        <hr />
        <app-counter></app-counter>
      </div>
    </div>
  </div>
</template>

<script>
import Counter from "./components/Counter.vue";
import Result from "./components/Result.vue";
import AnotherResult from "./components/AnotherResult";

export default {
  components: {
    appCounter: Counter,
    appResult: Result,
    appAnotherResult: AnotherResult
  }
};
</script>

من در ابتدا فایل AnotherResult.vue را در این کامپوننت import کرده ام و سپس آن را به عنوان یک کامپوننت ثبت نموده ام (خصوصیت components درون script). بعد از این کار می توانیم از آن به شکل هر کامپوننت دیگری استفاده نمایید، یعنی تگ های <app-another-result> را در Template قرار دهید. با ذخیره این کدها به مرورگر می رویم. آیا مشکلی می بینید؟ در ظاهر خیر!

برای اینکه متوجه مشکل بشویم اول باید برایتان توضیح بدهم که چرا شمارنده را در 2 ضرب کردم. در بسیاری از اوقات می خواهیم قبل از نمایش یک مقدار خاص، روی آن عملیات خاصی انجام بدهیم. در اینجا ضرب در 2 کردن فقط یک سمبل از چنین عملیاتی است. مثلا برخی اوقات باید رمز کاربر را به صورت علامت های ستاره (****) نمایش بدهیم، مگر اینکه کاربر روی آیکون چشم کلیک کند تا رمز تایپ شده را ببیند، یا شاهد بخواهیم قیمت یک کالا را از state گرفته و روی آن عملیات خاصی را انجام بدهیم. مشکل برنامه ما اینجاست که در دو کامپوننت مختلف از کدهای تکراری استفاده کرده ایم (مبحث code duplication). شاید ضرب در 2 کردن یک عدد کار ساده ای باشد اما در برنامه های واقعی عملیات های پیچیده ای را روی خصوصیات state انجام می دهیم بنابراین نباید 100 خط کد را در هر کامپوننت به صورت تکراری بنویسیم تا خروجی یکسان بگیریم. این مسئله به تنهایی حجم برنامه ما را به شدت بالا می برد. حالا فرض کنید که خطایی را در محاسبات خود انجام داده باشیم، در چنین حالتی باید کدها را در 20 یا 30 فایل مختلف تغییر بدهیم که بسیار آزار دهنده است.

برای حل این مسئله getter ها (به معنی «دریافت کننده») وارد کار می شوند:

نحوه ی کار getters در VueX
نحوه کار getters در VueX

همانطور که از تصویر مشخص است، به جای آنکه مقادیر را به طور مستقیم از store خود بگیریم، می توانیم آن ها را از یک فایل دیگر دریافت کنیم که حاوی تمام کدهای محاسباتی ما برای دریافت state است. برای این کار به فایل store.js بروید و در کنار state یک خصوصیت دیگر به نام getters تعریف می کنیم:

export const store = new Vuex.Store({
    state: {
        counter: 0
    },
    getters: {
        doubleCounter: state => {
            return state.counter * 2;
        }
    }
});

کلمه getters یک کلید واژه است بنابراین باید حتما به همین شکل بیاید. ما به getters یک شیء پاس می دهیم و درون آن هر نوع getter ای که خواستیم را تعریف می کنیم. من در اینجا یک getter با نام doubleCounter (یعنی شمارنده را دو برابر کن) تعریف کرده ام که یک تابع است (توابع ES6 یا همان arrow function ها) و تنها کارش دو برابر کردن شمارنده می باشد. آرگومان state (همان state برنامه ما - شیء ای که بالاتر در آن counter را تعریف کرده ایم) که به این getter پاس داده شده است، به صورت خودکار توسط VueX پاس داده می شود و نیازی نیست ما کاری خاصی را انجام بدهیم.

حالا که getter خود را تعریف کرده ایم باید از آن استفاده کنیم. بنابراین اول به AnotherResult.vue رفته و کدهای آن را بدین شکل تغییر می دهیم:

<script>
export default {
  computed: {
    counter() {
      return this.$store.getters.doubleCounter;
    }
  }
};
</script>

با اینکه doubleCounter یک تابع است اما نباید پرانتز ها را برایش قرار بدهید (VueX خودش این کار را می کند). همین کار را برای Result.vue نیز انجام می دهیم. احتمالا با خودتان می گویید این کد که اصلا کوتاه تر نشد! حرفتان درست است. این یک مثال ساده و یک خطی بود (مقدار فقط در 2 ضرب می شد) اما در برنامه های واقعی که 100 ها خط کد داریم، این روش حجم برنامه شما را بسیار کمتر می کند. حالا می توانید کدها را در مرورگر خود تست کنید و همه چیز باید بدون مشکل اجرا شود.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش رایگان Vue js از صفر تا صد توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.