State भित्र प्रबन्धन- व्यापक गाइड र वास्तविक-विश्व Vuex उदाहरणहरू Vue.js

Vuex अनुप्रयोगहरूको लागि एक state व्यवस्थापन पुस्तकालय हो, तपाईंलाई आफ्नो अनुप्रयोगमा Vue.js विभिन्न s मा डेटा व्यवस्थापन र सिङ्क्रोनाइज गर्न अनुमति दिन्छ । Flux आर्किटेक्चर लागू गर्दछ, यो अनुप्रयोग व्यवस्थापन गर्न सजिलो र कुशल बनाउँछ । component Vuex state

 

मुख्य अवधारणाहरू Vuex समावेश छन्

१. State

in state ले Vuex तपाईको एप्लिकेसनको लागि केन्द्रीकृत डाटा स्टोरलाई प्रतिनिधित्व गर्दछ। यसले अनुप्रयोगको डाटा राख्छ जुन विभिन्न component s बीच साझेदारी गर्न आवश्यक छ। state यहाँ परिभाषित गर्ने एउटा उदाहरण हो Vuex:

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

 

२. 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--;  
    }  
  }  
});

 

३. 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);  
    }  
  }  
});

 

४। 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 । डेटा व्यवस्थापनको लागि संरचित दृष्टिकोण प्रदान गर्दा यसले कोडको रखरखाव र पुन: प्रयोज्यता बढाउँछ।