جامع گائیڈ اور حقیقی دنیا کی مثالوں کے State ساتھ انتظام کرنا Vuex Vue.js

Vuex ایپلیکیشنز کے لیے ایک state منیجمنٹ لائبریری ہے، جو آپ کو اپنی ایپلی کیشن میں Vue.js مختلف s میں ڈیٹا کو منظم اور ہم آہنگ کرنے کی اجازت دیتی ہے ۔ Flux فن تعمیر کو لاگو کرتا ہے، جس سے ایپلیکیشن کا نظم کرنا آسان اور موثر ہوتا ہے ۔ component Vuex state

 

میں کلیدی تصورات Vuex شامل ہیں۔

1۔ State

in آپ کی درخواست 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 ۔ وہ ڈیٹا کو واپس کرنے سے پہلے اس تک رسائی حاصل کرنے اور اس میں ہیرا پھیری کرنے کے لیے مفید ہیں 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 ۔ یہ کوڈ کی برقراری اور دوبارہ پریوستیت کو بڑھاتا ہے، جبکہ ڈیٹا مینجمنٹ کے لیے ایک منظم انداز فراہم کرتا ہے۔