স্টেট, গেটারস, মিউটেশনস, এবং অ্যাকশনস

Vue.js এ Vuex হল একটি সেন্ট্রালাইজড স্টোর ম্যানেজমেন্ট সিস্টেম, যা অ্যাপ্লিকেশনের সমস্ত ডেটা এবং স্টেট একটি কেন্দ্রীয় স্থানে ধারণ করে। Vuex এর মাধ্যমে আপনি সমস্ত কম্পোনেন্টে ডেটা শেয়ার এবং ম্যানেজ করতে পারেন। Vuex মূলত চারটি প্রধান কনসেপ্টের উপর ভিত্তি করে কাজ করে: স্টেট, গেটারস, মিউটেশনস, এবং অ্যাকশনস। এই কনসেপ্টগুলো কিভাবে কাজ করে এবং এগুলোর ব্যবহার কীভাবে হয়, তা নিচে আলোচনা করা হলো।

১. স্টেট (State)

স্টেট হল অ্যাপ্লিকেশনের ডেটা যা Vuex স্টোরে সংরক্ষিত থাকে। এটি এমন একটি জায়গা যেখানে আপনি সমস্ত কম্পোনেন্টের জন্য সাধারণ ডেটা বা স্টেট ধারণ করতে পারেন, যেমন ইউজারের তথ্য, পণ্যের তালিকা, অথবা যেকোনো অন্য ধরনের ডেটা।

উদাহরণ:

const store = new Vuex.Store({
  state: {
    count: 0,
    message: 'Hello Vuex!'
  }
});

এখানে state অবজেক্টে দুটি প্রপার্টি রয়েছে: count এবং message।

• count: এটি একটি গোনার মান ধারণ করে।
• message: এটি একটি স্ট্রিং যা 'Hello Vuex!' ধারণ করছে।

২. গেটারস (Getters)

গেটারস হল একটি বিশেষ ধরনের ফাংশন যা Vuex স্টোর থেকে ডেটা অ্যাক্সেস করার জন্য ব্যবহৃত হয়। আপনি গেটারস এর মাধ্যমে স্টেট থেকে ডেটা রিটার্ন করতে পারেন, এবং এগুলো সাধারণত অ্যাপ্লিকেশনের মধ্যে ডেটা রিড করার জন্য ব্যবহার করা হয়। গেটারস খুবই কার্যকরী যখন আপনি স্টেটের ডেটা কনভার্ট বা প্রসেস করতে চান, যেমন count এর দ্বিগুণ মান রিটার্ন করা।

উদাহরণ:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubledCount: state => {
      return state.count * 2;
    }
  }
});

এখানে doubledCount গেটারটি count এর দ্বিগুণ মান রিটার্ন করবে। আপনি এই গেটারটি অ্যাক্সেস করতে পারবেন:

store.getters.doubledCount; // 0

৩. মিউটেশনস (Mutations)

মিউটেশনস হল Vuex স্টোরের মধ্যে ডেটা বা স্টেট পরিবর্তন করার জন্য ব্যবহৃত ফাংশন। Vuex-এ, স্টেট পরিবর্তন শুধুমাত্র মিউটেশনস এর মাধ্যমে করা উচিত। মিউটেশনস সরাসরি স্টেট পরিবর্তন করে, এবং এই পরিবর্তনগুলো ট্র্যাক করা সহজ হয়।

উদাহরণ:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

এখানে, increment মিউটেশনটি count স্টেটের মান এক বাড়িয়ে দেয়। আপনি মিউটেশন কল করতে পারেন:

store.commit('increment');
console.log(store.state.count); // 1

• commit: এটি মিউটেশন কল করার জন্য ব্যবহৃত হয়।
• মিউটেশন শুধুমাত্র স্টেটের পরিবর্তন করতে পারে, এবং এটি সিঙ্ক্রোনাস (synchronous) হয়।

৪. অ্যাকশনস (Actions)

অ্যাকশনস হল ফাংশন যা স্টোরের ডেটা পরিবর্তন করার আগে কিছু লজিক বা অ্যাসিনক্রোনাস অপারেশন (যেমন API কল) পরিচালনা করতে পারে। অ্যাকশনগুলি মিউটেশনসকে commit করার মাধ্যমে স্টেট পরিবর্তন করে, কিন্তু অ্যাকশনস সরাসরি স্টেট পরিবর্তন করতে পারে না। অ্যাকশনস সাধারণত API কল বা অন্যান্য অ্যাসিনক্রোনাস কাজের জন্য ব্যবহার করা হয়।

উদাহরণ:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

এখানে, incrementAsync অ্যাকশনটি 1 সেকেন্ড অপেক্ষা করে এবং তারপর increment মিউটেশনটি commit করে।

আপনি অ্যাকশন কল করতে পারেন:

store.dispatch('incrementAsync');

• dispatch: এটি অ্যাকশন কল করার জন্য ব্যবহৃত হয়।
• অ্যাকশনগুলি অ্যাসিনক্রোনাস হতে পারে, এবং মিউটেশন কম্পোনেন্ট থেকে স্টেট পরিবর্তন করে।

Vuex স্টোরের পুরো উদাহরণ:

// store.js
const store = new Vuex.Store({
  state: {
    count: 0,
    message: 'Welcome to Vuex!'
  },
  getters: {
    doubledCount: state => state.count * 2,
    message: state => state.message
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
    updateMessage({ commit }, newMessage) {
      commit('setMessage', newMessage);
    }
  }
});

এখানে:

• State: count এবং message স্টোরে রাখা হয়েছে।
• Getters: doubledCount এবং message গেটার হিসেবে ব্যবহৃত হচ্ছে।
• Mutations: increment এবং setMessage মিউটেশন হিসেবে ব্যবহৃত হচ্ছে।
• Actions: incrementAsync (অ্যাসিনক্রোনাস মিউটেশন) এবং updateMessage অ্যাকশন হিসেবে ব্যবহৃত হচ্ছে।

সারাংশ

• স্টেট: Vuex স্টোরে ডেটা সংরক্ষণ করা হয় যা সমস্ত কম্পোনেন্টের জন্য অ্যাক্সেসযোগ্য।
• গেটারস: এটি স্টেট থেকে ডেটা প্রাপ্তির জন্য ব্যবহৃত হয় এবং প্রক্রিয়াজাত ডেটা রিটার্ন করতে সাহায্য করে।
• মিউটেশনস: এটি Vuex স্টোরের ডেটা পরিবর্তন করার জন্য ব্যবহৃত হয় এবং এটি সিঙ্ক্রোনাসভাবে স্টেট পরিবর্তন করে।
• অ্যাকশনস: এটি অ্যাসিনক্রোনাস অপারেশন বা কিছু লজিক পরিচালনা করে এবং মিউটেশনস এর মাধ্যমে স্টেট পরিবর্তন করে।

Vuex এর মাধ্যমে অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট আরও কার্যকর এবং স্কেলেবল হয়, বিশেষত বড় এবং জটিল অ্যাপ্লিকেশনের জন্য।