व्यापक गाइड और वास्तविक दुनिया के उदाहरणों के State साथ प्रबंधन Vuex Vue.js

Vuex एप्लिकेशन के लिए एक state प्रबंधन लाइब्रेरी है, जो आपको अपने एप्लिकेशन में Vue.js विभिन्न डेटा को प्रबंधित और सिंक्रनाइज़ करने की अनुमति देती है । फ्लक्स आर्किटेक्चर को लागू करता है, जिससे एप्लिकेशन को प्रबंधित करना आसान और कुशल हो जाता है । component Vuex state

 

में प्रमुख अवधारणाएँ Vuex शामिल हैं

1. State

in आपके एप्लिकेशन के लिए केंद्रीकृत डेटा स्टोर का प्रतिनिधित्व करता है state । Vuex इसमें एप्लिकेशन का डेटा होता है जिसे विभिन्न component के बीच साझा करने की आवश्यकता होती है। state यहां a को परिभाषित करने का एक उदाहरण दिया गया है 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 । उनमें एपीआई कॉल, एसिंक कार्य या जटिल तर्क शामिल हो सकते हैं। यहां किसी क्रिया को परिभाषित करने का एक उदाहरण दिया गया है 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 वे डेटा को वापस लौटाने से पहले उस तक पहुंचने और उसमें हेरफेर करने के लिए उपयोगी हैं 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 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, और घोषित कर सकते हैं, और उन्हें अपने Vue s में उपयोग कर सकते हैं। actions store.js component

उदाहरण:

फ़ाइल में 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 । यह डेटा प्रबंधन के लिए एक संरचित दृष्टिकोण प्रदान करते हुए कोड रखरखाव और पुन: प्रयोज्यता को बढ़ाता है।