
ما در جلسه قبل با mutation ها آشنا شدیم که روش استانداردی برای تغییر state محسوب می شوند اما هنوز نکاتی از آن ها باقی مانده است که باید به آن ها توجه کنیم. مسئله اولی که مورد بحث ما است مبحث synchronous بودن بودن mutation ها است. کلمه synchronous در ایران به کلماتی مانند «همگام» یا «متقارن» معنی شده است. از نظر لغوی ترجمه صحیح تر، «همگام» است اما به هر حال اگر این دو کلمه را شنیده اید، باید بدانید که به چه چیزی اشاره می کنند. در حال حاضر mutation های ما همگی synchronous یا همگام هستند و هیچ گاه نباید درون این mutation ها از کدهای نامتقارن استفاده کنید. همگام بودن یک mutation به معنی این است که mutation باید به صورت کامل اجرا شود تا mutation یا عملیات های دیگر انجام شوند و نمی توانیم هر دو عملیات را در کنار هم و در حال اجرا داشته باشیم.
یک نمونه از کدهای ناهمگام استفاده از تابع جاوا اسکریپتی setTimeout است که پس از چند ثانیه کار خاصی را انجام می دهد. مثالی دیگر از عملیات های ناهمگام، ارسال درخواست به سرور و انتظار برای پاسخ سرور است. اگر از چنین کدهایی درون mutation های خودتان استفاده کنید، دچار مشکل می شوید. mutation های شما باید همیشه synchronous (همگام یا متقارن) باشند.
یکی از مهم ترین مزایای mutation ها این است که بتوانیم تشخیص دهیم کدام mutation در چه زمانی باعث تغییر state ما شده است اما اگر بخواهیم عملیات های asynchronous را درون آن انجام بدهیم دیگر مشخص نخواهد شد کدام mutation مسئول تغییر state است. چرا؟ به دلیل اینکه ممکن است mutation اول از نوع async باشد و به دلیل تاخیر در اجرا، پس از mutation دوم اجرا شود. حالا ترتیب mutation ها کاملا بهم ریخته است و کدها طبق انتظارات شما اجرا نخواهند شد. مثلا تصور کنید که کاربر بخواهد کد تخفیفی را برای محصولی استفاده کند. اگر این عملیات به صورت async اجرا شود، ممکن است فاکتور، با قیمت نشان داده شده به کاربر یکی نباشد و باعث گیج شدن کاربر شود.
مسئله اینجاست که نیاز ما به انجام عملیات های ناهمگام (async) غیر قابل انکار است. ما دائما در حال تبادل داده با سرور هستیم و نمی توانیم آن را نادیده بگیریم. بنابراین چطور می توانیم این مشکل را حل کنیم؟ VueX برای حل این مشکل از قابلیتی به نام Action استفاده می کند. Action ها یک واحد میانی بین کامپوننت و mutation هستند که عملیات های async را اجرا کرده و سپس تغییر را commit می کنند. به عبارت دیگر کامپوننت ما به action می گوید که فلان عملیات async را انجام بده. action آنقدر منتظر می ماند که عملیات async تمام شود و پس از آن commit را انجام می دهد. بدین صورت هیچ کدام از مشکلات قبلی پیش نخواهد آمد.

برای اینکه یک عملیات ناهمگام را شبیه سازی کنم تا action ها را در عمل ببینیم، از setTimeout استفاده می کنم تا پس از کلیک روی یکی از دکمه های برنامه، چند ثانیه طول بکشد و سپس counter تغییر کند اما قبل از آن به فایل store.js می رویم تا یک action را تعریف کنیم:
export const store = new Vuex.Store({ state: { counter: 0 }, getters: { doubleCounter: state => { return state.counter * 2; }, stringCounter: state => { return state.counter + ' Clicks'; } }, mutations: { increment: state => { state.counter++; }, decrement: state => { state.counter--; } }, actions: { increment: context => { context.commit('increment'); } } });
نحوه تعریف action ها به شکل بالا است. یعنی مثل mutations یک آرگومان به صورت خودکار دریافت می کنید که context نام دارد. این آرگومان به ما اجازه می دهد که به بسیاری از خصوصیات و قابلیت های store خودمان (مانند getter ها و commit و غیره) دسترسی داشته باشیم. در واقع context مانند store است با این تفاوت که تمام قابلیت های store را ندارد. کد بالا یک کد ساده است که واقعا عملیات async خاصی را انجام نمی دهد و فقط برای یادگیری Syntax یا نحو آن را آورده ام. در این کد از طریق context متد commit را صدا می زنیم و سپس increment را به آن پاس می دهیم. توجه داشته باشید که نام action ما در اینجا increment است اما مقدار increment پاس داده شده به context.commit به mutation ما با نام increment اشاره دارد. یعنی باید نام mutation خودتان را به context.commit پاس بدهید.
باید نکته جالبی را هم به شما بگویم. اگر فقط بخواهیم commit را صدا بزنیم، می توانیم از قابلیت destructuring در ES6 استفاده کنیم تا فقط و فقط متد commit را از شیء context بگیریم:
actions: { increment: ({ commit }) => { commit('increment'); } }
اگر با object destructuring در ES6 آشنا نیستید، در مورد آن جست و جو کنید.
نکته بعدی و مهمی که باید بدانیم، مسئله اعمال استاندارد mutation ها است. معمولا پیشنهاد می شود برای نظر بیشتر، همیشه از action ها استفاده کنید، حتی اگر کدهایتان async نیستند. این کار باعث می شود همه چیز منظم تر اجرا شود. حتی اگر برنامه ای دارید که فقط یک عملیات async دارد بهتر است برای تمام عملیات ها از action ها استفاده کنید. بنابراین می توان به صورت زیر جمع بندی کرد:
- حالت اجباری: اگر کدهای شما دارای عملیات async (ناهمگام) باشد، باید برای آن قسمت از کدها از action ها استفاده کنید.
- حالت اختیاری: اگر کدهای شما دارای عملیات async (ناهمگام) نباشد، نیازی نیست که از action ها استفاده کنید و می توانید mutation ها را مستقیما صدا بزنید.
- حالت پیشنهادی: بر اساس نظر اکثر برنامه نویسان، بهتر است همیشه و برای تمام درخواست ها (چه async و چه sync) از action ها استفاده کنید. ما در این دوره از این حالت استفاده می کنیم.
من یک action دیگر را برای decrement و چند action دیگر برای حالت Async نیز می نویسم:
actions: { increment: ({ commit }) => { commit('increment'); }, decrement: ({ commit }) => { commit('decrement'); }, asyncIncrement: ({ commit }) => { setTimeout(() => { commit('increment'); }, 1000); }, asyncDecrement: ({ commit }) => { setTimeout(() => { commit('decrement'); }, 1000); } }
همانطور که می بینید دو Action اول کاری به جز اضافه کردن و کم کردن counter انجام نمی دهند (mutation های ما را صدا می زنند) اما دو action دوم، یک ثانیه صبر کرده و سپس mutation ها را صدا می زنند. برای استفاده از این action ها می توانیم به فایل AnotherCounter.vue رفته و به جای mapMutations از mapActions استفاده کنیم. این کار را در جلسه بعدی انجام خواهیم داد.
windows 7 enterprise lizenz kaufen
- نصب و راهاندازی فریمورک 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