
با انواع مختلفی از مباحث VueX آشنا شده ایم اما یکی از بحث های فرعی در VueX مبحث ماژولار کردن مدیریت State است که در برنامه های بزرگ کاربرد دارد. فرض کنید در یک برنامه بسیار بزرگ تمام state ها و mutation ها و action ها و getter ها درون یک فایل باشند! این فایل بسیار بزرگ خواهد بود و نظمی نخواهد داشت. برای انجام این کار ابتدا در پوشه store یک پوشه دیگر به نام modules ایجاد کنید.
در بسیاری از مواقع کدهای داخل store.js را می توان به دسته های منطقی تقسیم کرد. مثلا در فایل خودمان کدهای مربوط به counter.vue شامل counter در state و متد های doubleCounter و غیره هستند اما value فقط در App.vue استفاده می شود. البته در برنامه کوچک ما انجام چنین تقسیمی، کاری منطقی نیست اما من این کار را به خاطر اهداف آموزشی انجام می دهم. بنابراین بهتر است فایل Store.js را به دو ماژول تقسیم کنیم. برای این کار به پوشه modules بروید و دو فایل دیگر به نام های counter.js و value.js ایجاد کنید. حالا به counter.js بروید و یک ثابت به نام State را تعریف می نماییم:
const state = { counter: 0 };
دیگر value را در اینجا نمی آوریم چرا که این فایل مخصوص counter (شمارنده) است. همین کار را با دیگر اجزای counter انجام می دهیم تا فایل این فایل (counter.js) به شکل زیر در بیاید:
const state = { counter: 0 }; const getters = { doubleCounter: state => { return state.counter * 2; }, stringCounter: state => { return state.counter + ' Clicks'; } }; const mutations = { increment: (state, payload) => { state.counter += payload; }, decrement: (state, payload) => { state.counter -= payload; } }; const actions = { increment: ({ commit }, payload) => { commit('increment', payload); }, decrement: ({ commit }, payload) => { commit('decrement', payload); }, asyncIncrement: ({ commit }, payload) => { setTimeout(() => { commit('increment', payload.by); }, payload.duration); }, asyncDecrement: ({ commit }, payload) => { setTimeout(() => { commit('decrement', payload.by); }, payload.duration); } }
من تک تک قسمت های مربوط به counter را از فایل store.js را برداشته و در این فایل قرار داده ام. البته کار سازماندهی را به شیء های مختلفی واگذار کرده ام تا state و mutation و getter و action ها همگی در شیء های جداگانه ای باشند. در نهایت دو راه برای استفاده از این اشیاء داریم:
- یا کدها را طوری ویرایش کنیم که هر شیء را export کنیم. در این حالت برای استفاده از هر شیء باید آن را import کنیم.
- یا کدها را طوری بنویسیم که فقط یک شیء کلی برای export داشته باشیم. در این حالت فقط کافی است همان شیء را import کنیم.
هر عقل سلیمی می پذیرد که روش دوم بسیار ساده تر است بنابراین می توان گفت:
// بقیه کدها // const actions = { increment: ({ commit }, payload) => { commit('increment', payload); }, decrement: ({ commit }, payload) => { commit('decrement', payload); }, asyncIncrement: ({ commit }, payload) => { setTimeout(() => { commit('increment', payload.by); }, payload.duration); }, asyncDecrement: ({ commit }, payload) => { setTimeout(() => { commit('decrement', payload.by); }, payload.duration); } } export default { state: state, mutations: mutations, actions: actions, getters: getters }
همانطور که در کد بالا مشخص است من یک دستور export default را برای یک شیء نوشته ام تا این فایل فقط و فقط یک دستور Export داشته باشد. درون این شیء کلید های state و mutation و getter و action را داریم که مقادیرشان همان اشیاء state و mutation و getter و action است. آیا یادتان هست که در چنین شرایطی می توانستیم از حالت خلاصه ES6 استفاده کنیم؟
export default { state, mutations, actions, getters }
حالا کد ما تمیزتر شده است! فعلا این کار را برای فایل value.js انجام نمی دهیم چرا که می خواهم بعدا چیزی را به شما نشان بدهم که به این فایل مربوط است. حالا باید شیء export شده در counter.js را وارد store.js کنیم چرا که همیشه فایل state ما یک فایل واحد خواهد بود. احتمالا فکر می کنید که باید به صورت دستی تمام این اشیاء را import کنیم اما اینطور نیست. تنها کار لازم رفتن به فایل Store.js و تعریف خصوصیت جدیدی به نام modules است:
import Vue from 'vue'; import Vuex from 'vuex'; import counter from "./modules/counter"; Vue.use(Vuex); export const store = new Vuex.Store({ state: { counter: 0, value: 0 }, getters: { value: state => { return state.value; } }, mutations: { updateValue: (state, payload) => { state.value = payload; } }, actions: { updateValue({ commit }, payload) { commit('updateValue', payload); } }, modules: { counter } });
من کل کدهای فایل store.js را برایتان قرار داده ام تا ببینید بعد از کات کردن تمام خصوصیات مربوط به counter.vue و قرار دادن آن ها در counter.js، این فایل به چه شکلی در آمده است. من در ابتدا فایل counter.js را در این فایل import کرده ام. سپس یک خصوصیت جدید را در انتهای این فایل تعریف کرده ام که modules نام دارد. تمام این نام ها باید دقیقا به همین شکل باشد و نمی توانید آن ها را تغییر بدهید. تنها چیزی که به modules داده ام همان counter ای است که در بالای صفحه import کرده بودم. در ضمن من در این قسمت از روش خلاصه ES6 استفاده کرده ام که خلاصه کد زیر است:
// بقیه کدها // actions: { updateValue({ commit }, payload) { commit('updateValue', payload); } }, modules: { counter: counter } });
اما من همان حالت خلاصه را استفاده می کنم. حالا اگر کدها را ذخیره کرده و به مرورگر بروید، همه چیز بدون مشکل اجرا می شود.
نوبت به معرفی مشکل جدید می رسد! تصور کنید که دو ماژول برای State داریم: پست های سایت و کاربران سایت. حالا اگر کدهایی داشته باشیم که به هیچ کدام از این ماژول ها مربوط نباشند و از طرفی نخواهیم آن ها را در store.js قرار بدهیم چطور؟ مثلا کدهایی مربوط به header صفحه که باید در همه جا باشند. یا به هر دلیل دیگری بخواهیم تقسیم بندی متفاوتی داشته باشیم (نه اینکه همیشه ماژول هایمان را بر اساس کامپوننت ها ایجاد کنیم). من یک فایل دیگر در پوشه Store ایجاد می کنم که actions.js نام دارد. سپس تنها action خودم را که مربوط به value است (updateValue) به شکل زیر در این فایل قرار می دهم:
export const updateValue = ({ commit }, payload) => { commit('updateValue', payload); }
اگر action های دیگری نیز داشتید، آن ها را بدین شکل export می کنید (هر Action یک export جداگانه دارد). حالا به Store.js برمی گردیم و برای import کردن actions.js می گوییم:
import Vue from 'vue'; import Vuex from 'vuex'; import counter from "./modules/counter"; import * as actions from "./actions";
درست است که ما در این برنامه کوچک فقط یک Action داریم اما در برنامه های بزرگ تر قطعا بیشتر از این تعداد action خواهیم داشت و به جای وارد کردن تک تک آن ها می توانیم از علامت * و سپس as actions استفاده نماییم. با این کار جاوا اسکریپت یک شیء به نام actions می سازد که تمام export های فایل Actions.js را درون خود دارد. سپس به قسمت پایین تر این فایل (store.js) می روم و می گویم:
// بقیه کدها // mutations: { updateValue: (state, payload) => { state.value = payload; } }, actions, modules: { counter: counter } });
باز هم از روش خلاصه ES6 استفاده کرده ام و تمام action ها را به شکل بالا وارد این قسمت کرده ام. همین کار را با mutation ها نیز انجام می دهیم. یعنی یک فایل به نام mutations.js را درون پوشه store (نه پوشه modules) می سازم و آن را به شکل زیر قرار می دهم:
export const updateValue = (state, payload) => { state.value = payload; }
سپس فایل دیگری برای getter ها به نام getters.js:
export const value = state => { return state.value; }
در نهایت در Store.js این فایل ها را import کرده و از آن ها استفاده می کنیم:
import Vue from 'vue'; import Vuex from 'vuex'; import counter from "./modules/counter"; import * as actions from "./actions"; import * as getters from "./getters"; import * as mutations from "./mutations"; Vue.use(Vuex); export const store = new Vuex.Store({ state: { counter: 0, value: 0 }, getters, mutations, actions, modules: { counter: counter } });
حالا همه چیز مثل قبل کار می کند اما فایل هایمان به شدت ساختار یافته و منظم شده اند.
windows 8.1 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