پیاده‌سازی Getters برای ماژول Portfolio در VueX

در جلسه قبل موفق شدیم که mutation های فایل portfolio.js (پوشه modules) را بنویسیم که کدهای نسبتا ساده ای بودند اما در این جلسه باید به سراغ getter ها برویم که تعریفشان خیلی سخت نیست اما نکته جالبی دارند. ما باید دو getter داشته باشیم: یک Getter برای دریافت funds و getter دیگری برای دریافت سهام های خریداری شده توسط ما (سهام های داخل portfolio که از کل سهام های موجود جدا هستند). مشکل اینجاست که در جلسه قبل برای BUY_STOCK کد زیر را نوشتیم:

'BUY_STOCK'(state, { stockId, quantity, stockPrice }) {
    const record = state.stocks.find(element => element.id == stockId);
    if (record) {
        record.quantity += quantity;
    } else {
        state.stocks.push({
            id: stockId,
            quantity: quantity
        });
    }
    state.funds -= stockPrice * quantity;
},

یعنی هنگام خرید سهام، شیء ای که در آرایه stocks ذخیره می شود فقط حاوی id و quantity است. البته شما می توانستید در این قسمت name و price و غیره را نیز اضافه کنید اما من آن را بدین شکل نوشته ام. با این حساب اگر Getter ما برای portfolio فقط state.stocks را برگراند، فقط id و quantity را خواهیم داشت که کافی نیست. ما باید در قسمت portfolio علاوه بر id و quantity، مقادیر دیگری نیز داشته باشیم.

برای حل این مشکل می توانیم از getter های سراسری در Store استفاده کنم. getter سراسری یعنی زمانی که تمام getter های ماژول های من (stocks.js و portfolio.js) با هم در فایل store.js ترکیب شوند. بگذارید در عمل به شما نشان بدهم:

const getters = {
    stockPortfolio(state, getters) {
        return state.stocks.map(stock => {
            const record = getters.stocks.find(element => element.id == stock.id);
            return {
                id: stock.id,
                quantity: stock.quantity,
                name: record.name,
                price: record.price
            }
        });
    }
}

من در اینجا state را گرفته ام که عادی است اما در آرگومان دوم getters را دریافت می کنم که همان getters سراسری من در Store.js هستند. سپس با تابع map روی تک تک عناصر موجود در آرایه Stocks در state همین فایل گردش می کنم. ما برای ساخت record از getters.stocks.find استفاده کرده ایم. در اینجا getters همان getters سراسری است بنابراین getters.stocks به getter زیر در فایل stocks.js (در پوشه modules) اشاره دارد:

const getters = {
    stocks: state => {
        return state.stocks;
    }
}

بنابراین با getters.stocks.find به آرایه stocks در فایل stocks.js دسترسی داریم که علاوه بر id و quantity، مقادیر name و price را دارد. بنابراین هدف ما این است که از بین کل سهام موجود (getters.stocks) باید سهام را که خریده ایم پیدا کنیم و شیء جدیدی را بسازیم که حاوی تمام فیلدهای id و quantity و name و price باشد:

// بقیه کدها //
return state.stocks.map(stock => {
    const record = getters.stocks.find(element => element.id == stock.id);
    return {
        id: stock.id,
        quantity: stock.quantity,
        name: record.name,
        price: record.price
    }
});
// بقیه کدها //

این می شود getter اول ما! getter دوم نیز برای funds است که نوشتن آن بسیار ساده است:

const getters = {
    stockPortfolio(state, getters) {
        return state.stocks.map(stock => {
            const record = getters.stocks.find(element => element.id == stock.id);
            return {
                id: stock.id,
                quantity: stock.quantity,
                name: record.name,
                price: record.price
            }
        });
    },
    funds(state) {
        return state.funds;
    }
}

state.funds به آرایه funds در state همین فایل اشاره می کند. حالا که همه چیز مرتب شده است باید تمام این اشیاء (getter ها و mutations و غیره) را export کنیم:

export default {
    state,
    mutations,
    actions,
    getters
}

حالا باید به فایل store.js برویم تا از این فایل (portfolio.js) استفاده کنیم:

import stocks from './modules/stocks';
import portfolio from './modules/portfolio';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        stocks,
        portfolio
    }
});

حالا ماژول های خود را درون store.js داریم و از آن ها استفاده می کنیم. حالا می توانیم کدهایی را برای دکمه Buy بنویسیم تا بتوانیم واقعا سهام بخریم. برای این کار به فایل Stock.vue (پوشه components/stocks) می رویم و متد buyStock را به شکل زیر ویرایش می کنیم:

methods: {
  buyStock() {
    const order = {
      stockId: this.stock.id,
      stockPrice: this.stock.price,
      quantity: this.quantity
    };
    // console.log(order);
    this.$store.dispatch("buyStock", order);
    this.quantity = 0;
  }
}

یعنی action ای به نام buyStocks را Dispatch کرده ام (در جلسات قبل آن را تعریف کرده بودیم) و order را به عنوان payload به آن پاس داده ام. همچنین دستور log را کامنت کرده ام چرا که دیگر به آن نیازی نداریم. حالا به فایل stocks.js (در پوشه modules) می رویم تا buyStocks را تکمیل کنیم. اگر یادتان باشد آن را بدین شکل خالی گذاشته بودیم:

const actions = {
    buyStock: ({ commit }, order) => {
        commit();
    },
// بقیه کدها //

ما باید ابتدا mutation صحیح را صدا بزنیم و سپس order دریافتی را دوباره به آن ارسال کنیم:

const actions = {
    buyStock: ({ commit }, order) => {
        commit('BUY_STOCK', order);
    },
// بقیه کدها //

جالب اینجاست که کد بالا را در فایل Stocks.js نوشته ایم اما BUY_STOCK در فایل portfolio.js است. همانطور که می دانید این فایل ها ماژول هستند بنابراین قبل از اجرا همگی در فایل Store.js در هم ادغام می شوند و جدا بودن آن ها مشکلی ندارد. همچنین شما می توانید ساختار ماژول های خودتان را بر اساس سلیقه خودتان تغییر دهید و لازم نیست که حتما از روش من استفاده کنید. کدی که در این جلسه نوشتیم به ما کمک می کند که سهام را بخریم اما در قسمت بعد باید کاری کنیم که سهام ما در صفحه portfolio نمایش داده شوند (فعلا در صفحه portfolio چیزی نداریم).