सर्वसमावेशक मार्गदर्शक आणि वास्तविक-जागतिक State उदाहरणांसह व्यवस्थापन Vuex Vue.js

Vuex state ॲप्लिकेशन्ससाठी व्यवस्थापन लायब्ररी आहे, जी तुम्हाला तुमच्या ऍप्लिकेशनमधील Vue.js वेगवेगळ्या डेटामध्ये डेटा व्यवस्थापित आणि सिंक्रोनाइझ करण्याची परवानगी देते. अनुप्रयोग व्यवस्थापित करणे सोपे आणि कार्यक्षम बनवून, फ्लक्स आर्किटेक्चर लागू करते. component Vuex state

मधील प्रमुख संकल्पना Vuex समाविष्ट आहेत

१. State

इन तुमच्या state अनुप्रयोगासाठी Vuex केंद्रीकृत डेटा स्टोअरचे प्रतिनिधित्व करते. त्यामध्ये ऍप्लिकेशनचा डेटा असतो जो वेगवेगळ्या component s मध्ये सामायिक करणे आवश्यक आहे. 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 कॉल, async कार्ये किंवा जटिल तर्क असू शकतात. येथे क्रिया परिभाषित करण्याचे एक उदाहरण आहे 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 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. डेटा व्यवस्थापनासाठी संरचित दृष्टीकोन प्रदान करताना ते कोड राखण्याची क्षमता आणि पुन: उपयोगिता वाढवते.