State માં વ્યવસ્થાપન- Vuex વ્યાપક Vue.js માર્ગદર્શિકા અને વાસ્તવિક-વિશ્વ ઉદાહરણો

Vuex state એપ્લીકેશન માટે મેનેજમેન્ટ લાઇબ્રેરી છે, જે તમને તમારી એપ્લિકેશનમાં Vue.js વિવિધ s માં ડેટા મેનેજ અને સિંક્રનાઇઝ કરવાની મંજૂરી આપે છે. ફ્લક્સ આર્કિટેક્ચરનો અમલ કરે છે, જે એપ્લિકેશનનું સંચાલન કરવાનું સરળ અને કાર્યક્ષમ બનાવે છે. component Vuex state

 

માં મુખ્ય ખ્યાલો Vuex શામેલ છે

1. 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 કૉલ્સ, અસિંક કાર્યો અથવા જટિલ તર્ક શામેલ હોઈ શકે છે. અહીં ક્રિયાને વ્યાખ્યાયિત કરવાનું ઉદાહરણ છે 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. ડેટા મેનેજમેન્ટ માટે સંરચિત અભિગમ પ્રદાન કરતી વખતે તે કોડ જાળવણીક્ષમતા અને પુનઃઉપયોગિતાને વધારે છે.