ਵਿੱਚ- ਵਿਆਪਕ ਗਾਈਡ ਅਤੇ ਅਸਲ-ਵਿਸ਼ਵ ਉਦਾਹਰਣਾਂ State ਦੇ ਨਾਲ ਪ੍ਰਬੰਧਨ ਕਰਨਾ Vuex Vue.js

Vuex ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਇੱਕ state ਪ੍ਰਬੰਧਨ ਲਾਇਬ੍ਰੇਰੀ ਹੈ Vue.js, ਜੋ ਤੁਹਾਨੂੰ component ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਵੱਖ-ਵੱਖ s ਵਿੱਚ ਡੇਟਾ ਦਾ ਪ੍ਰਬੰਧਨ ਅਤੇ ਸਮਕਾਲੀਕਰਨ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ। 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 ਕਾਲਾਂ, ਅਸਿੰਕ ਕਾਰਜ, ਜਾਂ ਗੁੰਝਲਦਾਰ ਤਰਕ ਸ਼ਾਮਲ ਹੋ ਸਕਦੇ ਹਨ। ਇੱਥੇ ਇੱਕ ਕਾਰਵਾਈ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦਾ ਇੱਕ ਉਦਾਹਰਨ ਹੈ 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 । ਇਹ ਡੇਟਾ ਪ੍ਰਬੰਧਨ ਲਈ ਇੱਕ ਢਾਂਚਾਗਤ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ, ਕੋਡ ਦੀ ਸਾਂਭ-ਸੰਭਾਲ ਅਤੇ ਮੁੜ ਵਰਤੋਂਯੋਗਤਾ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ।