Διαχείριση State με Vuex in Vue.js- Περιεκτικός οδηγός και παραδείγματα πραγματικού κόσμου

Vuex είναι μια state βιβλιοθήκη διαχείρισης για Vue.js εφαρμογές, που σας επιτρέπει να διαχειρίζεστε και να συγχρονίζετε δεδομένα σε διαφορετικά component s στην εφαρμογή σας. Vuex εφαρμόζει την αρχιτεκτονική Flux, καθιστώντας εύκολη και αποτελεσματική τη διαχείριση της εφαρμογής state.

 

Οι βασικές έννοιες Vuex περιλαμβάνουν

1. State

Το state in Vuex αντιπροσωπεύει τον κεντρικό χώρο αποθήκευσης δεδομένων για την εφαρμογή σας. Διατηρεί τα δεδομένα της εφαρμογής που πρέπει να μοιραστούν μεταξύ διαφορετικών component s. Ακολουθεί ένα παράδειγμα ορισμού του a 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. Βελτιώνει τη δυνατότητα συντήρησης και επαναχρησιμοποίησης του κώδικα, ενώ παρέχει μια δομημένη προσέγγιση στη διαχείριση δεδομένων.