এর State সাথে পরিচালনা করা- ব্যাপক গাইড এবং বাস্তব-বিশ্বের উদাহরণ Vuex Vue.js

Vuex অ্যাপ্লিকেশনগুলির জন্য একটি state ব্যবস্থাপনা লাইব্রেরি, যা আপনাকে আপনার অ্যাপ্লিকেশনের Vue.js বিভিন্ন গুলি জুড়ে ডেটা পরিচালনা এবং সিঙ্ক্রোনাইজ করার অনুমতি দেয় ৷ ফ্লাক্স আর্কিটেকচার প্রয়োগ করে, এটি অ্যাপ্লিকেশন পরিচালনা করা সহজ এবং দক্ষ করে তোলে । component Vuex state

 

মূল ধারণা Vuex অন্তর্ভুক্ত

1. State

ইন আপনার state অ্যাপ্লিকেশনের Vuex জন্য কেন্দ্রীভূত ডেটা স্টোরের প্রতিনিধিত্ব করে। এটি অ্যাপ্লিকেশনের ডেটা ধারণ করে যা বিভিন্ন component গুলির মধ্যে ভাগ করা প্রয়োজন৷ এখানে একটি সংজ্ঞায়িত করার একটি state উদাহরণ Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: {  
    count: 0,  
    todos: []  
  }  
});

 

2. Mutations

Mutations state ইন সংশোধনের জন্য দায়ী Vuex । এগুলি সিঙ্ক্রোনাস ফাংশন যা কারেন্ট state এবং পেলোডকে আর্গুমেন্ট হিসাবে নেয়। এখানে একটি মিউটেশন সংজ্ঞায়িত করার একটি উদাহরণ রয়েছে Vuex:

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

 

3. Actions

Actions mutations অ্যাসিঙ্ক্রোনাস ক্রিয়াকলাপ পরিচালনা করতে এবং পরিবর্তন করতে প্রেরণ করতে ব্যবহৃত হয় state । এগুলিতে API কল, অ্যাসিঙ্ক কাজ বা জটিল যুক্তি থাকতে পারে। এখানে একটি কর্ম সংজ্ঞায়িত করার একটি উদাহরণ Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: { /* mutations definition */ },
  actions: {  
    async fetchData({ commit }) {  
      const response = await fetch('https://api.example.com/data');  
      const data = await response.json();  
      commit('updateData', data);  
    }  
  }  
});

 

4. Getters

Getters state আপনাকে দোকান থেকে প্রাপ্ত পুনরুদ্ধার এবং গণনা করার অনুমতি দেয় Vuex । এগুলি s-এ ফেরত দেওয়ার আগে ডেটা অ্যাক্সেস এবং ম্যানিপুলেট করার জন্য দরকারী component । এখানে একটি গেটার সংজ্ঞায়িত করার একটি উদাহরণ রয়েছে Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { todos: [...] },
  getters: {  
    completedTodos(state) {  
      return state.todos.filter(todo => todo.completed);  
    },  
    todoCount(state) {  
      return state.todos.length;  
    }  
  }  
});

 

Vuex আপনার প্রকল্পে ইনস্টল করতে Vue.js, আপনি এই পদক্ষেপগুলি অনুসরণ করতে পারেন৷

ধাপ 1: Vuex npm বা সুতার মাধ্যমে ইনস্টল করুন:

npm install vuex

বা

yarn add vuex

ধাপ 2: store.js  আপনার প্রকল্পের রুট ডিরেক্টরিতে একটি ফাইল তৈরি করুন । এখানেই আমরা আবেদনটি ঘোষণা এবং পরিচালনা করব state ।

ধাপ 3: ফাইলটিতে store.js  , Vuex একটি নতুন স্টোর অবজেক্ট আমদানি করুন এবং তৈরি করুন:

import Vue from 'vue';  
import Vuex from 'vuex';  
  
Vue.use(Vuex);  
  
const store = new Vuex.Store({  
  // Declare your states, getters, mutations, and actions here  
});  
  
export default store;

ধাপ 4: ফাইলটিতে main.js  , স্টোরটি আমদানি করুন এবং এটিকে আপনার Vue অ্যাপ্লিকেশনের সাথে লিঙ্ক করুন:

import Vue from 'vue';  
import App from './App.vue';  
import store from './store';  
  
new Vue({  
  store,  
  render: h => h(App),  
}).$mount('#app');

ধাপ 5: Vuex এখন আপনি আপনার প্রকল্পে ইনস্টল এবং সেট আপ করেছেন । আপনি আপনার state s, getters, mutations, এবং actions ফাইলে ঘোষণা করতে পারেন store.js এবং আপনার Vue component s এ ব্যবহার করতে পারেন।

উদাহরণ:

ফাইলে store.js  , আপনি state এই মত একটি সহজ এবং মিউটেশন ঘোষণা করতে পারেন:

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

একটি Vue-তে component, আপনি state এবং ফাংশনগুলি ব্যবহার করে  এবং মিউটেশন ব্যবহার করতে পারেন  : mapState mapMutations

import { mapState, mapMutations } from 'vuex';  
  
export default {  
  computed: {  
    ...mapState(['count'])  
  },  
  methods: {  
    ...mapMutations(['increment'])  
  }  
};

এই পদক্ষেপগুলি সহ, আপনি সফলভাবে ইনস্টল করেছেন এবং আপনার অ্যাপ্লিকেশন Vuex পরিচালনা করতে এটি ব্যবহার করতে পারেন ৷ state Vue.js

 

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