Upravljanje State pomoću Vuex in Vue.js- Sveobuhvatan vodič i primjeri iz stvarnog svijeta

Vuex je state biblioteka za upravljanje Vue.js aplikacijama, koja vam omogućuje upravljanje i sinkronizaciju podataka u različitim component s u vašoj aplikaciji. Vuex implementira Flux arhitekturu, što olakšava i učinkovito upravljanje aplikacijom state.

 

Ključni pojmovi u Vuex uključuju

1. State

Ulaz predstavlja centraliziranu pohranu podataka za vašu aplikaciju state. Vuex Sadrži podatke aplikacije koje treba dijeliti između različitih component s. Evo primjera definiranja state u Vuex:

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

 

2. Mutations

Mutations odgovorni su za izmjenu state u Vuex. To su sinkrone funkcije koje uzimaju struju state i korisni teret kao argumente. Evo primjera definiranja mutacije u Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {  
    increment(state) {
      state.count++;  
    },  
    decrement(state) {
      state.count--;  
    }  
  }  
});

 

3. Actions

Actions koriste se za rukovanje asinkronim operacijama i otpremom mutations za izmjenu state. Mogu sadržavati API pozive, asinkrone zadatke ili složenu logiku. Evo primjera definiranja radnje u 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 omogućuju vam dohvaćanje i izračunavanje izvedenih state iz Vuex trgovine. Korisni su za pristup i manipuliranje podacima prije nego što ih vrate u component s. Evo primjera definiranja gettera u 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;  
    }  
  }  
});

 

Da biste instalirali Vuex u svoj Vue.js projekt, možete slijediti ove korake

Korak 1: Instalirajte Vuex putem npm-a ili yarn-a:

npm install vuex

ili

yarn add vuex

Korak 2: Stvorite store.js  datoteku u korijenskom direktoriju svog projekta. Ovdje ćemo deklarirati i upravljati aplikacijom state.

Korak 3: U store.js  datoteku uvezite Vuex i stvorite novi objekt trgovine:

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;

Korak 4: U main.js  datoteku uvezite trgovinu i povežite je sa svojom Vue aplikacijom:

import Vue from 'vue';  
import App from './App.vue';  
import store from './store';  
  
new Vue({  
  store,  
  render: h => h(App),  
}).$mount('#app');

Korak 5: Sada ste instalirali i postavili Vuex svoj projekt. Možete deklarirati svoje state s, getters, mutations i actions u store.js datoteci i koristiti ih u svojim Vue component s.

Primjer:

U store.js  datoteci možete deklarirati jednostavnu state i mutaciju ovako:

const store = new Vuex.Store({
  state: {  
    count: 0  
  },  
  mutations: {  
    increment(state) {
      state.count++;  
    }  
  }  
});

U Vueu component možete koristiti state mutaciju i pomoću funkcija  i  : mapState mapMutations

import { mapState, mapMutations } from 'vuex';  
  
export default {  
  computed: {  
    ...mapState(['count'])  
  },  
  methods: {  
    ...mapMutations(['increment'])  
  }  
};

Ovim ste koracima uspješno instalirali Vuex i možete ga koristiti za upravljanje state svojom Vue.js aplikacijom.

 

Pomoću Vuex, možete jednostavno i dosljedno upravljati aplikacijom state. Poboljšava mogućnost održavanja i ponovne upotrebe koda, dok pruža strukturirani pristup upravljanju podacima.