సమగ్ర మార్గదర్శి మరియు వాస్తవ ప్రపంచ State ఉదాహరణలతో నిర్వహించడం Vuex Vue.js

Vuex అనేది అప్లికేషన్‌ల state నిర్వహణ లైబ్రరీ, ఇది మీ అప్లికేషన్‌లోని Vue.js వివిధ s అంతటా డేటాను నిర్వహించడానికి మరియు సమకాలీకరించడానికి మిమ్మల్ని అనుమతిస్తుంది. ఫ్లక్స్ ఆర్కిటెక్చర్‌ను అమలు చేస్తుంది, అప్లికేషన్‌ను నిర్వహించడం సులభం మరియు సమర్ధవంతంగా చేస్తుంది. component Vuex state

 

లో కీలక భావనలు Vuex ఉన్నాయి

1. State

ఇన్ మీ state అప్లికేషన్ Vuex కోసం కేంద్రీకృత డేటా స్టోర్‌ని సూచిస్తుంది. ఇది వివిధ s మధ్య భాగస్వామ్యం చేయవలసిన అప్లికేషన్ యొక్క డేటాను కలిగి ఉంటుంది 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. డేటాను component sకి తిరిగి ఇచ్చే ముందు యాక్సెస్ చేయడానికి మరియు తారుమారు చేయడానికి అవి ఉపయోగపడతాయి. గెటర్‌ను నిర్వచించడానికి ఇక్కడ ఒక ఉదాహరణ ఉంది 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. డేటా నిర్వహణకు నిర్మాణాత్మక విధానాన్ని అందించేటప్పుడు ఇది కోడ్ నిర్వహణ మరియు పునర్వినియోగతను మెరుగుపరుస్తుంది.