
در جلسه قبل پس از ارائه خلاصه ای کوتاه از جلسات، به بحث two-way-binding پرداختیم. مشکلی که در جلسه قبل معرفی شد، تغییر state توسط کاربر و یک input ساده بود. ما از فصل های اول این دوره یاد گرفته ایم که می توانیم با استفاده از v-model یک خصوصیت و یک input را به هم متصل کنیم تا با تغییر هر کدام، دیگری نیز تغییر کند اما مشکل جدید اینجاست که نمی توانیم خصوصیت computed خود را به روز رسانی کنیم. خصوصیت computed ما به نام value (فایل app.vue):
export default { computed: { value() { return this.$store.getters.value; } }, components: { appCounter: Counter, appAnotherCounter: AnotherCounter, appResult: Result, appAnotherResult: AnotherResult } };
input ساده ما در template (فایل app.vue):
<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> <app-another-counter></app-another-counter> <hr /> <input type="text" v-model="value" /> <p>{{ value }}</p> </div>
راه های مختلفی برای حل این مشکل وجود دارد که من یکی از آن ها را به شما نشان می دهم. در ابتدا باید input خود را از حالت v-model در بیاوریم چرا که نمی توانیم با خصوصیت computed یک رابطه two-way-binding را راه بیندازیم. به جای آن Value عادی را قرار داده و سپس یک رویداد input را برایش تعریف می کنیم:
<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> <app-another-counter></app-another-counter> <hr /> <input type="text" :value="value" @input="updateValue" /> <p>{{ value }}</p> </div>
امیدوارم رویداد input را از فصل های اول این دوره آموزشی به یاد داشته باشید. input@ یک event listener است که هنگام تایپ شدن، فعال می شود. با این کار گفته ام که در هنگام به روز رسانی input (تایپ مقدار جدید یا حذف مقدار قبلی) متد updateValue را اجرا کن.
در مرحله بعدی باید methods را در این کامپوننت تعریف کنیم. سپس در این قسمت متدی را با نام دلخواه خودمان تعریف می کنیم. توجه داشته باشید که متد های این قسمت همگی از متد های همین کامپوننت هستند و فعلا ربطی به state یا جای دیگری ندارند:
export default { computed: { value() { return this.$store.getters.value; } }, methods: { updateValue() { } }, components: { appCounter: Counter, appAnotherCounter: AnotherCounter, appResult: Result, appAnotherResult: AnotherResult } }; </script>
قبل از اینکه من جواب را بگویم، سعی کنید حدس بزنید که درون updateValue (یا هر نامی که شما برای متد خود انتخاب کرده اید) چه کدهایی را باید بنویسیم.
// بقیه کدها // methods: { updateValue(event) { this.$store.dispatch("updateValue", event.target.value); } } // بقیه کدها //
همانطور که در فصل های اول توضیح داده بودم، شیء event به صورت خودکار توسط Vue پاس داده می شود. تنها کاری که ما در این متد انجام داده ایم، dispatch کردن یک action به نام updateValue است. البته باید payload را هم به همراه این action ارسال کنیم بنابراین مقدار event.target.value را به عنوان payload انتخاب کرده ام که در واقع همان مقدار تایپ شده درون input ما است. حالا اگر به مرورگر برویم، با تایپ در input می بینیم که مقدار value در state نیز به روز رسانی می شود (همان مقداری که در <p> نمایش می دهیم).
آیا واقعا این تنها روش انجام این کار است؟ آیا روش بهتری وجود ندارد؟ خوشبختانه روش دیگری نیز وجود دارد! چیزی که تا به حال در مورد آن توضیح نداده بودیم، این است که خصوصیات computed می توانند getter و setter داشته باشند. من تا این قسمت در مورد آن ها حرفی نزده بودم چرا که واقعا به ندرت به آن ها احتیاج پیدا می کنید و منتظر فرصتی بودم که بتوانم آن ها را معرفی کنم. برای شروع باید input را به شکل زیر تغییر دهیم:
<input type="text" v-model="value" /> <p>{{ value }}</p>
یعنی دوباره از v-model استفاده می کنیم تا یک رابطه two-way-binding برقرار شود. حالا برای اضافه کردن getter و Setter به یک خصوصیت computed باید به شکل زیر عمل کنیم:
export default { computed: { value: { get() { return this.$store.getters.value; }, set(value) { this.$store.dispatch("updateValue", value); } } }, // methods: { // updateValue(event) { // this.$store.dispatch("updateValue", event.target.value); // } // }, components: { appCounter: Counter, appAnotherCounter: AnotherCounter, appResult: Result, appAnotherResult: AnotherResult } }; </script>
به زبان ساده باید در computed نام خصوصیت خود را بیاورید (value) و سپس یک شیء را به آن پاس بدهید. شیء پاس داده شده یک متد به نام get (دریافت اطلاعات) و یک متد به نام Set (ثبت یا ویرایش اطلاعات) دارد و نمی توانید نام این متد ها را تغییر بدهید. متد set یک آرگومان را به صورت خودکار دریافت می کند که همان مقدار جدید برای value می باشد. در واقع v-model باعث می شود که مقادیر تایپ شده به عنوان یک آرگومان به متد set ارسال شوند. من action مورد نظر خودم را dispatch کرده و آرگومان پاس داده شده را به عنوان payload قرار داده ام. در نهایت کدهای methods را کامنت کرده ام تا تصور نکنید برنامه ما از آن ها استفاده می کند.
حالا کدها را ذخیره کرده و به مرورگر می رویم. اگر همه چیز را درست انجام داده باشید، با تایپ یک مقدار در input، مقدار value (در State) ما نیز به روز رسانی می شود. به طور مثال به تصویر زیر نگاه کنید:

بله! ما می توانیم رشته را نیز به این input بدهیم چرا که هیچ قانون خاصی را برایش تعیین نکرده ایم. با این حساب value ما در State برابر با roxo.ir می باشد! اگر می خواهید فقط از اعداد استفاده کنید باید تایپ input را روی number بگذارید:
<input type="number" v-model="value" />
همچنین می توانید از isNaN (متد جاوا اسکریپتی است و به Vue ربطی ندارد) استفاده کنید تا مطمئن شوید مقدار تایپ شده عدد است:
if (isNaN(YourValue)) { alert("The input is not a number"); return false; }
به جای YourValue باید مقدار input را قرار بدهید. بنابراین همه چیز به خودتان مربوط می شود. البته ما در فصل های آینده به سراغ اعتبارسنجی فرم ها در Vue.js می رویم و این موضوع را مفصلا در آنجا بررسی خواهیم کرد.
- نصب و راهاندازی فریمورک 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