
در جلسه قبل موفق شدیم که getter ها را برای ماژول portfolio تعریف کنیم و منطق مورد نیاز دکمه Buy را نیز پیاده سازی کنیم اما فعلا هیچ چیزی را برای نمایش در portfolio نداریم. نکته ای را نیز باید به شما بگویم که ممکن است برایتان مشکل ایجاد کرده باشد. در حال حاضر اگر مرورگر را باز کرده و به صفحه stocks بروید (آدرس http://localhost:8080/stocks) باید بتوانید با تغییر مقدار سهام در input ها، روی Buy کلیک کنید. اگر پس از تغییر تعداد سهام از صفر به عددی صحیح مثل 5، دکمه buy همچنان غیرفعال باقی ماند باید کدها را تغییر دهید. به فایل Stock.vue در پوشه stocks بروید و قسمت input را بدین شکل بنویسید:
<div class="pull-left"> <input type="number" class="form-control" placeholder="Quantity" v-model.number="quantity" /> </div>
دلیل غیرفعال باقی ماندن Buy این است که ما گفته بودیم اگر مقدار input یک عدد صحیح باشد، دکمه Buy غیرفعال شود. از طرفی در برخی از سیستم ها مقداری که به input می دهیم به عدد تبدیل نمی شود و رشته می ماند بنابراین رشته “5” با عدد 5 یکی نیست و شرط برقرار نمی شود. برای حل این مشکل باید به v-model یک modifier اضافه کنیم (v-model.number) تا رشته به عدد تبدیل شود. توضیحات بیشتر در لینک زیر از documentation وب سایت Vue.js:
https://vuejs.org/v2/guide/forms.html#number
پس از انجام این کار مشکل شما حل خواهد شد. در مرحله بعد باید به فایل portfolio.vue در پوشه components/portfolio برویم و قسمت template آن را به شکل زیر بنویسیم:
<template> <div class="col-sm-6 col-md-4"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title"> {{stock.name}} <small>(price: {{stock.price}} | Quantity: {{ stock.quantity }})</small> </h3> </div> <div class="panel-body"> <div class="pull-left"> <input type="number" class="form-control" placeholder="Quantity" v-model.number="quantity" /> </div> <div class="pull-right"> <button class="btn btn-success" @click="sellStock" :disabled="quantity <= 0 || !Number.isInteger(quantity)" >Sell</button> </div> </div> </div> </div> </template>
همانطور که می بینید بسیاری از کدها بین این فایل و فایل Stock.vue در پوشه stocks مشترک است. تغییرات ایجاد شده، ساخت دکمه Sell به جای Buy و متد sellStock به جای buyStock است که هنوز آن را تعریف نکرده ایم. البته من کلاس panel-success را به panel-info تغییر داده ام که رنگ پنل ها عوض شود. همچنین در ابتدای صفحه علاوه بر Price، تعداد (quantity) سهام را نیز اضافه کرده ایم. ما به این quantity دسترسی داریم چرا که در فایل portfolio.js (پوشه modules) در متد BUY_STOCK به شکل زیر فیلد های id و quantity را تعریف کرده بودیم:
// بقیه کدها // if (record) { record.quantity += quantity; } else { state.stocks.push({ id: stockId, quantity: quantity }); } // بقیه کدها //
به فایل خودمان (Stock.vue) برمی گردیم. قسمت template را که نوشتیم اما برای قسمت script در این فایل نیز باید متد sellStock را تعریف کنیم:
<script> export default { props: ["stock"], data() { return { quantity: 0 }; }, methods: { sellStock() { const order = { stockId: this.stock.id, stockPrice: this.stock.price, quantity: this.quantity }; } } }; </script>
بنابراین شباهت بین این دو کامپوننت بسیار زیاد است. البته متد sellStock هنوز کامل نیست و باید action مورد نظرش را صدا بزنیم. برای این کار می گویم:
export default { props: ["stock"], data() { return { quantity: 0 }; }, methods: { ...mapActions(["sellStock"]), sellStock() { const order = { stockId: this.stock.id, stockPrice: this.stock.price, quantity: this.quantity }; this.sellStock(order); this.quantity = 0; } } }; </script>
ما اینجا فقط به یک action نیاز داشتیم بنابراین نیازی نبود که از mapActions استفاده کنیم (می توانستیم به راحتی آن را dispatch کنیم) اما من می خواستم که به شما یادآوری کنم که روش های دیگری نیز برای صدا زدن Action هایمان داریم. با انجام این کار، این فایل (Stock.js در پوشه portfolio) تکمیل شده است و تنها کاری که باقی مانده است رفتن به Portfolio.vue برای نمایش سهام است.
برای نمایش سهام باید به فایل Portfolio.vue می رویم و اول از همه stock های خود را در آن دریافت می کنیم:
<script> import { mapGetters } from "vuex"; import Stock from "./Stock"; export default { computed: { ...mapGetters({ stocks: "stockPortfolio" }) }, components: { appStock: Stock } }; </script>
من در قدم اول mapGetters را صدا زده ام تا بتوانم Getter ای به نام stockPortfolio را صدا بزنم. البته به جای پاس دادن آرایه، یک شیء را به آن پاس داده ام تا بتوانم به نام stocks از آن استفاده کنم. در قدم بعدی Stock.vue را وارد این فایل نموده و آن را به عنوان یک کامپوننت محلی ثبت کرده ام. در مرحله بعد در قسمت template این فایل می گوییم:
<template> <div> <app-stock v-for="stock in stocks" :stock="stock"></app-stock> </div> </template>
یعنی با v-for بین stocks (از Getter گرفته ایم) گردش می کنم و stock را نیز به عنوان props به app-stock پاس می دهم چرا که اگر یادتان باشد از آن در فایل stock.vue (پوشه portfolio) استفاده می کنیم:
export default { props: ["stock"], data() { return { quantity: 0 }; }, // بقیه کدها //
برای تست این کدها به صفحه Stocks در مرورگر بروید (آدرس http://localhost:8080/stocks) و چند سهم را از هر شرکتی بخرید. سپس به صفحه Portfolio (آدرس http://localhost:8080/portfolio) بروید و باید سهام خود را در آنجا مشاهده کنید. البته فعلا نمی توانیم چیزی را بفروشیم، چرا؟ به دلیل اینکه در کدهای این جلسه مشکلی وجود دارد. من از عمد قسمتی را به اشتباه نوشته ام. آیا می توانید آن را پیدا کنید؟
در فایل Stock.vue در پوشه portfolio کدی به شکل زیر داریم:
methods: { ...mapActions(["sellStock"]), sellStock() { const order = { stockId: this.stock.id, stockPrice: this.stock.price, quantity: this.quantity }; this.sellStock(order); this.quantity = 0; } }
در اینجا نام action من sellStock است و از طرفی نام متد خودم نیز sellStock است بنابراین وقتی متد خودم صدا زده می شود (با کلیک روی دکمه Sell) خودش this.sellStock را دوباره اجرا می کند، بنابراین در یک حلقه نامتناهی گیر می کنیم. برای حل آن می گوییم:
methods: { ...mapActions({ placeSellOrder: "sellStock" }), sellStock() { const order = { stockId: this.stock.id, stockPrice: this.stock.price, quantity: this.quantity }; this.placeSellOrder(order); this.quantity = 0; } }
یعنی به راحتی نام action را تغییر داده ایم و حالا می توانید کدها را در مرورگر تست کنید.
- نصب و راهاندازی فریمورک VueJS
- مثالی قویتر و نصب محلی Vue
- درکی ساده از Tamplateها در Vue
- درک بهتر Directiveها + برخی از Directiveهای مشهور
- تعامل با Event Listenerها
- قدرت Vue با انواع Modifierها
- مبحث two-way-binding و پاسخ به تغییرات
- خصوصیات محاسبهشده (Computed Properties)
- روش جایگزین خصوصیات Computed
- استایلدهی پویا با اشیاء
- استایلدهی پویا اسمی بدون استفاده از کلاسها
- ایجاد شرط با v-if
- نمایش لیستها با v-for
- گردش درون اشیاء
- رهگیری عناصر در v-for
- اولین پروژه تمرینی – آمادهسازی اولیه
- پیادهسازی منطق شروع بازی
- تکمیل دکمه Attack
- کدنویسی متدهای باقیمانده در بازی
- نمایش log و اتمام پروژه
- آشنایی و تعامل بیشتر با شیء Vue
- نحوه مدیریت دادهها در شیء Vue
- استفاده از ref$ در قالبهای HTML
- آشنایی با Mount کردن Templateها
- نحوه بهروزرسانی DOM و چرخه زندگی شیء Vue
- استفاده از Lifecycleها در عمل
- راهاندازی سرور محلی Vue
- آشنایی با Vue CLI
- درک بهتر فایلهای Vue
- آشنایی با کامپوننتها
- ساخت کامپوننتها
- استفاده از کامپوننتها و قوانین آن
- ارتباط بین کامپوننتها با Props
- اعتبارسنجی Props
- رویدادهای شخصیسازیشده
- ارتباط بین کامپوننتهای خواهر و برادر
- استفاده از یک شیء سراسری Vue
- آشنایی با Slotها
- بررسی جزئیات بیشتری از Slotها
- قابلیتی جدید به نام Dynamic Components
- مرگ کامپوننتهای پویا
- فصل جدید و پروژه جدید
- پروژه Quote – پاسدادن دادهها با Prop
- پروژه Quote – تکمیل ثبت Quote
- تکمیل پروژه Quoteها
- فصل جدید، کار با فرمها
- کار با عناصر Textarea
- عناصر Checkbox و Radiobutton
- کار با منوهای آبشاری و جزئیات v-model
- تعریف عناصر شخصیسازیشده
- نگاهی عمیقتر به Directiveها
- ساخت یک Directive شخصی
- ثبت محلی Directiveها + قدمی پیشرفتهتر
- آشنایی با Filterها
- جایگزینی برای Filterها
- آشنایی با Mixinها
- جزئیات تکمیلی در مورد Mixinها
- آشنایی با انیمیشنها در Vue
- استفاده عملی از Transition و Animation
- ترکیب Transition و Animation
- استفاده از کلاسهای CSS مختلف
- تبدیل عناصر مختلف به یکدیگر با انیمیشن
- اعمال انیمیشن با جاوا اسکریپت
- کدنویسی متدهای مربوط به hookهای جاوا اسکریپتی
- تکمیل انیمیشن جاوا اسکریپتی + کامپوننتهای پویا
- ساخت یک لیست برای انیمیشنهای گروهی
- اضافهکردن انیمیشن به لیست ساختهشده
- مینی پروژه فصل – سوالات ریاضی
- تکمیل پروژه و اضافهکردن انیمیشن
- فصل جدید، درخواستهای HTTP
- ارسال اطلاعات به Firebase
- دریافت دادهها از Firebase
- آشنایی با Interceptorها در Vue-Resource
- آشنایی با مفهوم Resource در Vue-Resource
- جزئیات تکمیلی Resourceها
- فصل جدید، آشنایی با Routing
- آشنایی با Routing Modes و اضافهکردن لینکها
- استایلدهی لینک فعال
- ایجاد Navigation با کد و پارامترهای URL
- واکنش به تغییرات URL و پارامترهای آن
- ساخت URLهای پویاتر با Named Routes
- مباحث Query Parameter و Redirection
- مبحث Redirect و اضافهکردن انیمیشن
- پاسدادن # و کنترل عملیات اسکرول
- محافظت از Routeها با استفاده از Gaurdها (قسمت اول)
- محافظت از Routeها با استفاده از Gaurdها (قسمت دوم)
- بارگذاری Routeها به صورت lazy
- فصل جدید، آشنایی با VueX
- نحوهی پیادهسازی اولیهی پکیج VueX
- آشنایی با Getterها در VueX
- اتصال خودکار Getterها به خصوصیات
- حل مشکل ترکیب Getterها و Computed Props
- آشنایی با مبحث Mutation در VueX
- آشنایی با Actionها در Mutations
- درک عملیاتهای پشت صحنه در mapActions
- خلاصهی جلسات قبل + معرفی مشکلی جدید
- اعمال two-way-binding در VueX
- ماژولار کردن مدیریت State در VueX
- استفاده از Namespaceها در VueX
- فصل جدید، پروژهی نهایی دوره
- پیادهسازی Header یا Navigation سایت
- ایجاد ساختار برای قسمت سهام (stocks)
- اضافهکردن منطق دکمهی Buy
- پیادهسازی VueX روی پروژه
- تعریف Mutationهای ماژول Portfolio در VueX
- پیادهسازی Getters برای ماژول Portfolio در VueX
- تکمیل کامپوننت Portfolio و نمایش سهام
- اعتبارسنجی برای فروش سهام و استفاده از فیلترها
- نمایش Funds و اعتبارسنجی برای خرید سهام
- پایان دادن به روز + اضافه کردن انیمیشن به صفحات
- پیادهسازی drop-down و راهاندازی Firebase
- ذخیره و دریافت قیمتها با درخواستهای PUT و GET
- تکمیل دکمهی Load Data و کار با Vue dev Tools
- خروجیگرفتن نهایی از برنامه برای قرارگیری روی سرور
- فصل پیوست ۱: استفاده از axios به جای vue-resource
- فصل پیوست ۱: درخواست GET در axios
- فصل پیوست ۱: استفاده از Interceptorها در Axios
- فصل پیوست ۲: احراز هویت در برنامههای SPA
- فصل پیوست ۲: ساخت کاربر جدید با ایمیل و رمز عبور
- فصل پیوست ۲: دریافت توکن احراز هویت در مرورگر
- فصل پیوست ۲: تکمیل منطق برنامه و کدهای باقیمانده
- فصل پیوست ۲: پیوست توکن به درخواستهای خروجی
- فصل پیوست ۲: بهینهسازی برنامه و Path Guard
- فصل پیوست ۲: اضافهکردن مکانیسم logout از حساب
- فصل پیوست ۲: پیادهسازی logout خودکار از حساب
- فصل پیوست ۲: ذخیرهی دادهها در localStorage
- فصل پیوست ۲: پیادهسازی فرآیند login خودکار
- فصل پیوست ۳: فصل جدید، اعتبارسنجی دادههای کاربر
- فصل پیوست ۳: ارائهی فیدبک اعتبارسنجی در UI
- فصل پیوست ۳: آشنایی با Validatorهای عددی
- فصل پیوست ۳: آشنایی با Validatorهای رمز عبور
- فصل پیوست ۳: آشنایی با requiredUnless
- فصل پیوست ۳: اعتبارسنجی آرایههای پویا
- فصل پیوست ۳: ثبت فرم و اعتبارسنجیهای ناهمگام
- فصل پیوست ۴: نسخهی 3 از Vue CLI
- فصل پیوست ۴: آشنایی با پروژه در CLI جدید
- فصل پیوست ۴: استفاده و کار با پلاگینها در CLI جدید
- فصل پیوست ۴: آشنایی با Environment Variables
- فصل پیوست ۴: خروجی گرفتن از برنامه نهایی
- فصل پیوست ۴: شخصیسازی بیشتر Build
- فصل پیوست ۴: استفاده از GUI