خلاصه‌ی جلسات قبل + معرفی مشکلی جدید

تا این قسمت از فصل، به خوبی پیش آمده ایم. بسیاری از برنامه نویسان تازه کار می گویند که VueX را درک کرده اند اما هنوز در هنگام کدنویسی آنقدر ها هم راحت نیستند. این مسئله عادی است و هر زمانی که با یک زبان برنامه نویسی جدید یا پکیجی جدید کار می کنید، مدتی طول می کشد تا به آن عادت کنید. البته توجه داشته باشید که شما مجبور به استفاده از VueX نیستید؛ مثلا اگر برنامه ای کوچک یا متوسط دارید، شاید به نظرتان بیاید که استفاده از VueX اصلا لازم نیست و حتی اضافه کاری محسوب می شود! من برای این جلسه خلاصه ای از کل قسمت های قبل را ارائه می دهم تا نگاهی کلی به VueX داشته باشید:

• ما یک store مرکزی داریم که حاوی داده های مربوط به state برنامه ما است.
• همچنین mutations هایی تعریف کرده ایم که مسئول ایجاد تغییر در store هستند.
• mutation ها حتما و همیشه باید همگام یا synchronous باشند.
• برای رفع مشکل داشتن کدهای asynchronous (ناهمگام) و mutation ها از action ها استفاده می کردیم.
• کار action ها، اجرای تمام کدهای غیر همگام و سپس ثبت کردن یا commit کردن یک mutation است.
• این action ها از سمت کامپوننت های ما ارسال یا dispatch می شوند.
• استاندارد ترین روش، استفاده از mutation ها در هر حالت ممکن است (حتی برای درخواست های synchronous) اما مجبور به انجام این کار نیستید.
• شما به غیر از تغییر state نیاز به دریافت داده های آن نیز دارید و اینجاست که getter ها وارد می شوند.
• getter ها از طریق تمام کامپوننت های برنامه شما در دسترس هستند.
• مزیت استفاده از getter ها این است که در صورت تغییر مقادیر State، خودشان به صورت خودکار، کامپوننت هایی را که از این مقادیر استفاده می کنند به روز رسانی می کنند.

حالا که تصویری کلی از VueX در ذهن خود دارید، باید به سراغ مورد خاصی برویم که معمولا دچار بی توجهی می شود. برای شروع جلسه تصور کنید که در store.js علاوه بر counter خصوصیت دیگری به نام value نیز داشته باشیم که برابر صفر باشد:

export const store = new Vuex.Store({
    state: {
        counter: 0,
        value: 0
    },
    getters: {
        doubleCounter: state => {
// بقیه کدها //

همانطور که از قبل یاد گرفته ایم، این مقدار می تواند توسط هر کامپوننتی تغییر کرده یا دریافت شود بنابراین من یک getter ساده را در این قسمت قرار می دهم:

export const store = new Vuex.Store({
    state: {
        counter: 0,
        value: 0
    },
    getters: {
        doubleCounter: state => {
            return state.counter * 2;
        },
        stringCounter: state => {
            return state.counter + ' Clicks';
        },
        value: state => {
            return state.value;
        }
// بقیه کدها //

من نام این getter را value گذاشته ام و تنها کار آن، برگرداندن مقدار value (در state) می باشد. با این کار کامپوننت های ما می توانند هر زمانی که خواستند مقدار value را دریافت کنند. در ضمن هیچ اشکالی ندارد که نام getter با نام خصوصیت درون state یکسان باشد. در مرحله بعد یک mutation را برایش می نویسم تا علاوه بر دریافت، بتوانیم مقدار آن را از کامپوننت های مختلف تغییر دهیم:

export const store = new Vuex.Store({
    state: {
        counter: 0,
        value: 0
    },
    getters: {
        doubleCounter: state => {
            return state.counter * 2;
        },
        stringCounter: state => {
            return state.counter + ' Clicks';
        },
        value: state => {
            return state.value;
        }
    },
    mutations: {
        increment: (state, payload) => {
            state.counter += payload;
        },
        decrement: (state, payload) => {
            state.counter -= payload;
        },
        updateValue: (state, payload) => {
            state.value = payload;
        }
    },
// بقیه کدها //

همانطور که در کد بالا مشخص است متدی به نام updateValue را تعریف کرده ام که state و payload را دریافت می کند (در جلسه قبل در مورد payload صحبت کرده بودیم. مقداری دلخواه است که همراه action ارسال می شود). سپس می گوییم این payload هر مقداری داشته باشد، برابر با مقدار جدید value خواهد بود. به زبان ساده تر هر مقداری را به عنوان payload پاس بدهیم، همان مقدارِ جدیدِ value است. در نهایت یک Action را نیز برای این خصوصیت تعریف می کنم:

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);
    },
    updateValue({ commit }, payload) {
        commit('updateValue', payload);
    }
}

نیازی به توضیح برای کد بالا نیست اما نکته ای مهم در مورد آن وجود دارد: من از عمد به جای نوشتن این action مانند action های دیگر از روش عادی تری استفاده کرده ام. به action زیر نگاه کنید:

asyncDecrement: ({ commit }, payload) => {
    setTimeout(() => {
        commit('decrement', payload.by);
    }, payload.duration);
}

این action یک خصوصیت است که به عنوان value، یک function definition (از نوع arrow function ها) دارد. یعنی در شیء ای که خصوصیت یا key در شیء، asyncDecrement است و مقدارِ آن تعریف یک تابع (function definition) می باشد. این در حالی است که action جدید ما مستقیما به شکل یک تابع تعریف شده است:

updateValue({ commit }, payload) {
    commit('updateValue', payload);
}

با این کار می خواستم به شما بگویم که هر دو روش مقبول است و از هر روشی که راحت تر هستید استفاده نمایید. حالا به app.vue بروید و مانند من یک 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" />
</div>

سپس خصوصیتی را به عنوان computed تعریف می کنیم تا مقدار این input را بگیرد:

export default {
  computed: {
    value() {
      return this.$store.getters.value;
    }
  },
  components: {
    appCounter: Counter,
    appAnotherCounter: AnotherCounter,
    appResult: Result,
    appAnotherResult: AnotherResult
  }
};

در مرحله بعد می توانیم مقدار input را به این خصوصیت value متصل کنیم:

<input type="text" :value="value" />

حالا اگر به مرورگر بروید، درون input مقدار صفر را می بینید بنابراین همه چیز به خوبی کار می کند اما مشکلی مخفی داریم. فرض کنید به جای نمایش value بخواهیم با v-model همین input را به value متصل کنیم:

<input type="text" v-model="value" />

مشکل اینجاست که value در این فایل، یک خصوصیت computed است و خصوصیات computed فقط مقادیر را به ما برمی گردانند نه اینکه آن ها را تغییر بدهند. بنابراین اگر مرورگر را باز کنیم و درون input بنویسیم 10 (یا هر عدد دیگری) value ما به روز رسانی نمی شود. برای اینکه این موضوع را به شما اثبات کنم می توانیم مقدار value را در یک پاراگراف نمایش بدهیم:

<input type="text" v-model="value" />
<p>{{ value }}</p>

حالا اگر به مرورگر رفته و مقدار جدیدی را در input تایپ کنید، مقدار نمایش شده در تگ های <p> هیچ تغییری نمی کند. چرا؟ به دلیل اینکه این خصوصیت computed فقط و فقط یک Getter است و نمی تواند چیزی را ثبت کند. به نظر شما اگر بخواهیم State را بدین شکل تغییر بدهیم (از طریق یک input) چطور می توانیم v-model را در آن بگنجانیم؟ در قسمت بعد راه حل این مشکل را به شما توضیح می دهم.