پایان دادن به روز + اضافه کردن انیمیشن به صفحات

پایان دادن به روز (End Day)

تا این قسمت از پروژه، به خوبی جلو آمده ایم اما حالا نیاز به پیاده سازی منطق صحیح برای دکمه End day داریم. از آنجایی که برنامه ما یک برنامه ساده است و واقعا به سیستم بورس متصل نیست، باید منطقی را پیاده سازی کنیم که سیستم بورس را در ساده ترین حالت شبیه سازی کند. این کار وظیفه دکمه End day (پایان دادن به روز و رفتن به روز بعدی) است. زمانی که روی این دکمه کلیک می شود، باید قیمت ها تغییر کنند تا مثلا سود و ضرر بورس را در برنامه خودمان شبیه سازی کرده باشیم. البته انجام این کار آنقدر ها هم سخت نیست. در ابتدا به فایل Header.vue می رویم چرا که دکمه End day در این کامپوننت قرار دارد. سپس قسمت methods را برایش تعریف می کنیم:

<script>
export default {
  computed: {
    funds() {
      return this.$store.getters.funds;
    }
  },
  methods: {
    endDay () {
      
    }
  }
};
</script>

در این متد که من endDay نامگذاری کرده ام باید action ای را از ماژول stocks.js (پوشه modules) صدا بزنم. برای این کار از mapActions استفاده می کنم چرا که بعدا می خواهیم برای save & load نیز از action ها استفاده کنیم:

<script>
import { mapActions } from "vuex";
export default {
  computed: {
    funds() {
      return this.$store.getters.funds;
    }
  },
  methods: {
    ...mapActions(["randomizeStocks"]),
    endDay() {
      this.randomizeStocks();
    }
  }
};
</script>

در اینجا ابتدا mapActions را از پکیج vuex وارد این فایل کرده ایم. سپس در قسمت methods آن را صدا زده ایم و action مورد نظر خود را بیرون کشیده ایم. randomizeStocks نام action مورد نظر ما است. حالا اگر به stocks.js در پوشه modules برویم می توانیم این action را مشاهده کنیم:

const actions = {
    buyStock: ({ commit }, order) => {
        commit('BUY_STOCK', order);
    },
    initStocks: ({ commit }) => {
        commit('SET_STOCKS', stocks);
    },
    randomizeStocks: ({ commit }) => {
        commit('RND_STOCKS');
    }
}

همانطور که از این کد مشخص است، این action یک mutation به نام RND_STOCKS را commit می کند که چند خط بالاتر از خودش در قسمت mutation ها تعریف شده است:

const mutations = {
    'SET_STOCKS'(state, stocks) {
        state.stocks = stocks;
    },
    'RND_STOCKS'(state) {

    }
};

اگر یادتان باشد به شما گفته بودم که این قسمت را فعلا خالی می گذاریم تا بعدا آن را کامل کنیم. برای تغییر قیمت سهام مختلف باید ابتدا به state.stocks (تمام stock های موجود در کل برنامه) دسترسی داشته باشیم و سپس با یک حلقه بین تک تک سهامگردش کنیم و منطق خاصی را روی آن ها پیاده سازی کنیم:

const mutations = {
    'SET_STOCKS'(state, stocks) {
        state.stocks = stocks;
    },
    'RND_STOCKS'(state) {
        state.stocks.forEach(stock => {
            stock.price = stock.price * (1 + Math.random() - 0.5);
        });
    }
};

همانطور که می بینید منطق این کد به جز منطقی محاسباتی چیزی نیست. من با استفاده از forEach روی تک تک اعضای stocks (تک تک سهام ها) گردش کرده ام و گفته ام که قیمت جدید هر سهام باید برابر با فرمول بالا باشد. یعنی قیمت قبلی ضرب در عددی بین 0.5 تا 1.5 می شود. چطور؟ Math.random عددی بین 0 تا 0.999999 را به ما می دهد و زمانی که 1 واحد به آن اضافه کنیم، می شود عددی بین 1 تا 1.9999999 و زمانی که 0.5 واحد از آن کم کنیم می شود عددی بین 0.5 و 1.5 بنابراین هم امکان سقوط قیمت ها و نصف شدن وجود دارد و هم امکان 1.5 برابر شدن آن ها! در بازار بورس واقعی چنین تفاوت قیمت های شدیدی را در یک روز نمی بینیم اما این برنامه فقط یک مثال برای یادگیری برنامه نویسی است و زیاد با بازار بورس کاری نداریم!

کد بالا خوب است اما ممکن است قیمت اعشاری به ما بدهد بنابراین می توانیم آن را به شکل زیر گِرد کنیم:

'RND_STOCKS'(state) {
    state.stocks.forEach(stock => {
        stock.price = Math.round(stock.price * (1 + Math.random() - 0.5));
    });
}

Math.round عدد را برای ما گِرد می کند تا قیمت نهایی یک integer (عدد صحیح) باشد. اینجاست که Vuex به عنوان کتابخانه ای بسیار کاربردی به چشم می آید و حالا می فهمیم که اگر قرار بود به صورت دستی تغییر ایجاد شده را در تمام کامپوننت ها به روز رسانی کنیم، چه زمان زیادی را باید هدر می دادیم. حالا به Header.vue برمی گردیم و متد endDay را به دکمه End Day متصل می کنیم:

<li>
  <a href="#" @click="endDay">End Day</a>
</li>

اضافه کردن انیمیشن به تغییر کامپوننت ها

اضافه کردن انیمیشن به صفحات کار آسانی است و چندین بار در طول این دوره آن را انجام داده ایم. در حال حاضر اگر به App.vue برویم، در قسمت Template چنین چیزی را می بینیم:

<template>
  <div class="container">
    <app-header></app-header>
    <div class="row">
      <div class="col-xs-12">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

یعنی router-view های ما بدون هیچ transition ای در وسط صفحه قرار دارند. از طرفی اولین قدم برای اضافه کردن انیمیشن، اضافه کردن عنصر <transition> است بنابراین:

<div class="col-xs-12">
  <transition>
    <router-view></router-view>
  </transition>
</div>

حالا مثل همیشه باید یک نام را برای انیمیشن خود انتخاب کرده و به آن بدهیم:

<transition name="slide" mode="out-in">
  <router-view></router-view>
</transition>

در مرحله بعد به قسمت <styles> در همین فایل می رویم و انیمیشن های خود را به آن اضافه می کنیم:

<style>
body {
  padding: 30px;
}

.slide-enter-active {
  animation: slide-in 200ms ease-out forwards;
}

.slide-leave-active {
  animation: slide-out 200ms ease-out forwards;
}

@keyframes slide-in {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-30px);
    opacity: 0;
  }
}
</style>

یعنی دو key-frame داریم که یکی برای slide-in یا ورود کامپوننت و دیگری برای slide-out یا خروج عنصر است. برای Slide-in می خواهم از 30- پیکسل در محور Y (محور عمودی) به حالت عادی (صفر پیکسل) برسیم و opacity نیز از 0 به 1 تغییر کند. حالا همین حالت را برعکس می کنیم تا از آن برای slide-out استفاده کنیم. با این کار keyframe های خود را تعریف کرده ایم. در قدم بعدی به slide-enter-active می رویم و از slide-in برای آن استفاده می کنیم. طول مدت این انیمیشن را روی 200 میلی ثانیه قرار داده ام و با کلیدواژه Forwards به آن گفته ام که در حالت نهایی (پس از اتمام انیمیشن) باقی بماند. همین کار را برای slide-leave-active نیز انجام می دهیم تا انیمیشن slide-out نیز تنظیم شود.

به همین راحتی یک انیمیشن زیبا را نیز برای جا به جایی بین صفحات خود ایجاد کرده ایم! اگر الان به مرورگر بروید، همه چیز به خوبی کار خواهد کرد و هیچ مشکلی نخواهیم داشت. در جسله بعد روی منوی Drop-down و موارد دیگر کار خواهیم کرد.