تفاوت بین Action و Mutations در Vuex

در پکیج مدیریت وضعیت ویو جی اس (Vuex) دو مفهوم تحت عنوان "action" و "mutations" وجود دارد.

من منطق کامپوننت های ویو جی اس (Vuejs) را به صورت کامل یاد گرفتم و می توانم به راحتی یک وضعیت یا موقعیت (State) را بروزرسانی کنم اما دقیقا نمی دانم که تفاوت بین action و mutations چیست و این دو مفهوم چطور کار می کنند؟ از افراد متخصصی که با Vuex کار کردند تقاضا دارم بنده را راهنمایی کنند

برای پاسخ به سوال شما ابتدا یک سوال اصلی مطرح می کنم و به آن پاسخ می دهم:

سوال ۱: چرا توسعه دهندگان Vuejs می توانند از Action یا Mutations در Vuex استفاده کنند؟

پاسخ:

1. وقتی مقیاس یا حجم پروژه شما بسیار بزرگ باشد و توسعه دهندگان زیادی روی پروژه کار کنند، بنابراین باید حتما یک سیستم مدیریت وضعیت یا موقعیت (State Management) وجود داشته باشد که پیچیدگی های نرم افزار کاهش پیدا کرده و توسعه آن راحت تر باشد.
2. Vuex یک راهکار مناسب برای مدیریت وضعیت ارائه می دهد که با استفاده از آن بتوان علاوه بر ذخیره موقعیت فعلی یک متغییر، داده یا ...، این داده را تغییر داد.

حال به این سوال پاسخ می دهم: چه تفاوتی بین Actions و Mutations در Vuex وجود دارد؟

Mutations در Vuex

Mutations بر اساس رویدادها کار می کنند. یعنی دقیقا مشابه یک رویداد با آن بر خورد می شود. (منظور از رویداد همان Event است). هر Mutation یک نام و یک راه انداز دارد. از طرفی Mutation ها برای ویرایش موقعیت (state) بکار گرفته شده و قوانین منطق (Logic) در آن اهمیتی ندارد بلکه فقط اطلاعاتی درباره وضعیت یا state ارائه می دهد.

به مثال زیر توجه کنید:

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    INCREMENT (state) {
      // mutate state
      state.count++
    }
  }
})

Action ها در Vuex

از طرفی Action ها مشابه یک متد یا تابع هستند که وظیفه ی آنها اجرا یا پخش (Dispatch) کردن Mutation ها است. به عبارت دیگر Action ها دقیقا همان قوانین منطقی (Logic) هستند که با استفاده از آنها می توان در یک لحظه یک یا چندین Mutation را اجرا (Dispatch) کرد. در Action ها اطلاعات داده های تغییر یافته مهم نیست.

به مثال زیر توجه کنید:

function increment (store) {
  store.dispatch('INCREMENT')
}


function incrementBy ({ dispatch }, amount) {
  dispatch('INCREMENT', amount)
}

جمع بندی

در یک جمله اگر بخواهم به صورت خلاصه بگویم، Action ها دقیقا راه انداز Mutation ها هستند و به گونه ای مکمل یکدیگر عمل می کنند.