تعریف Mutationهای ماژول Portfolio در VueX

برای اینکه دکمه Buy کار کند به portfolio نیاز داریم بنابراین برای شروع به پوشه modules رفته و فایلی به نام portfolio.js را اضافه می کنیم. سپس باید state آن را تعریف کنیم. در نگاه اول ما به مقداری به نام funds (موجودی حساب) و مقداری دیگر به نام stocks (سهام های خریداری شده توسط ما، نه کل سهام های موجود) نیاز داریم. بنابراین می گوییم:

const state = {
    funds: 10000,
    stocks: []
}

من دوست داشتم funds با 10 هزار شروع شود اما این یک عدد سلیقه ای است و شما می توانید آن را تغییر دهید. در مرحله بعدی باید mutations ها را تعریف کنیم. اولین mutation من برای خرید سهام است، بنابراین نام آن را BUY_STOCK می گذارم:

const mutations = {
    'BUY_STOCK'(state, { stockId, quantity, stockPrice }) {

    }
}

احتمالا از من می پرسید که آرگومان دوم را از کجا آورده ام. آرگومان اول که state است و تمام mutation ها آن را دریافت می کنند اما آرگومان دوم همان ثابت order است که در فایل Stock.vue (در پوشه components/stocks) داشتیم:

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

بنابراین می دانم زمانی که بخواهم یک سهام را بخریم با این مقادیر سر و کار دارم. در ادامه که کدها را تکمیل کردیم کاملا متوجه خواهید شد. البته توجه داشته باشید که اینجا از Destructuring استفاده کرده ام تا فقط همین سه خصوصیت را از شیء گرفته و مستقیما در متد دریافت کنم. به همین دلیل است که در آرگومان یک شیء را داریم! حالا سوال اصلی این است که در BUY_STOCK چه چیزی بنویسیم؟ در قدم اول باید بررسی شود که آیا سهام خریداری شده را قبلا خریده ایم؟ به عبارتی در Stocks چنین سهمی را داریم یا خیر؟ چرا؟ به دلیل اینکه اگر از قبل 2 سهم از BMW خریده باشیم، با خرید سهم های بیشتر نباید یک آیتم جداگانه در آرایه Stocks ایجاد کنیم، بلکه باید تعداد سهم های خریداری شده را افزایش بدهیم. با این حساب می گوییم:

const mutations = {
    '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;
    }
}

در قدم اول ثابتی به نام record را تعریف کرده ایم که از بین state.stocks به دنبال عناصری با id خرید می گردد. متد find روی تک تک اعضای آرایه stocks گردش می کند (element هر عنصر است که به صورت خودکار پاس داده می شود) و سپس بررسی می کند که element.id (آیدی هر عضو) با stockId (آیدی سهام جدید که می خواهیم بخریم) یکی است یا خیر. زمانی که توابع arrow function را بدین صورت در یک خط می نویسید، همیشه یک return به صورت خودکار خواهیم داشت. یعنی arrow function بالا برابر کد زیر است:

const record = state.stocks.find(element => return element.id == stockId);

البته شما نمی توانید return را دستی بنویسید (خطا می گیرد) اما بدانید که حضور دارد. بنابراین مقدار record یا true است یا false (بر اساس شرطی که find بررسی می کند یا دارای مقدار خواهد بود یا هیچ مقداری نخواهد داشت که برابر False است). اگر true بود یعنی از قبل چند سهم از این شرکت داریم بنابراین باید record.quantity را (سهام برگردانده شده را) گرفته و quantity را به تعداد آن اضافه کنیم و در غیر این صورت یک شیء جدید را به stocks ارسال می کنیم که دارای id و quantity باشد. در نهایت باید funds را به تعداد سهم های خریداری شده کم کنیم (طبیعتا در خرید سهام، پول ما کم می شود).

در مرحله بعد باید یک mutation برای فروش سهام داشته باشیم. من می گویم:

const mutations = {
    '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;
    },
    'SELL_STOCK'(state, { stockId, quantity, stockPrice }) {
        const record = state.stocks.find(element => element.id == stockId);
        if (record.quantity > quantity) {
            record.quantity -= quantity;
        } else {
            state.stocks.splice(state.stocks.indexOf(record), 1);
        }

        state.funds += stockPrice * quantity;
    }
}

نام این متد را SELL_STOCK گذاشته ام. این متد مثل متد قبلی State و خصوصیات order را دریافت می کند. باز هم سهم مورد نظر خودمان را از بین سهام های موجود پیدا می کند، سپس می گوییم اگر تعداد سهم هایی که می خواهیم بفروشیم (quantity) از تعداد سهم های موجود (record.quantity) کمتر بود، آنگاه مشکلی نیست و به همان تعداد از quantity کم می کنیم. در غیر این صورت (اگر تعداد مساوی سهم ها یا از سهم های موجود بیشتر بود) کل سهام آن شرکت را پیدا کرده و حذف می کنیم. با این کار دیگر کادر مربوط به سهام را با عدد صفر نمی بینیم، بلکه کلا سهام را حذف می کنیم (البته در جلسات آینده اعتبارسنجی های کامل تری را پیاده سازی می کنیم). متد splice نیز یک index را می گیرد که ما با indexOf آن را پاس داده ایم و سپس به عنوان آرگومان دوم، عدد 1 را پاس داده ایم. عدد 1 یعنی فقط یک عضو را از index داده شده حذف کن و کاری به بقیه عناصر نداشته باش. در نهایت نیز funds را به تعداد سهم های فروخته شده افزایش داده ایم.

برای action های این فایل فقط به یک action برای SELL_STOCK نیاز داریم (action مربوط به BUY_STOCK در ماژول stocks.js در پوشه modules تعریف شده است) بنابراین به راحتی می گوییم:

const actions = {
    sellStock({ commit }, order) {
        commit('SELL_STOCK', order);
    }
}

این متد چیز جدیدی برای توضیح ندارد بنابراین از آن رد می شوم. در جلسه بعد به سراغ نوشتن دو عدد از Getter های این فایل می رویم که نکات جالبی دارند.