Vuex for Everyone
🚧 PLEASE NOTE: An updated version of this course is available! see the Pinia: The Enjoyable Vue Store course. This course is outdated!

Dynamic Vuex Getters

In this Vue.js tutorial, we’ll look into how we can use higher order functions to create dynamic getters in Vuex. Dynamic getters allow us to pass arguments to a getter. This is particularly useful if you want to query your store.

A common use case is to create a getter to find an item in the state using its id.

getProductById (state, getters) {
	return id => {
		return state.products.find(product => product.id === id)
	}
}
LESSON TRANSCRIPT

Σε το πρωτοκλίστικο κομπονέτ, χρησιμοποιούμε το Getter για να δείξουμε μόνο τα πρωτοκλίσματα που έχουμε στο κομμάτι. Αυτό που μπορούμε να κάνουμε είναι να δείξουμε όλες τα πρωτοκλίσματα και να καταστρέψουμε το Add to Cart button αν το πρωτοκλίσμα εξετάζεται. Products μέσα στην πρωτοκλίση. Μετά από όλα τα πρωτοκλίσματα, μπορούμε να καταστρέψουμε αν το Inventory Attribute των πρωτοκλίσεων δεν είναι καλύτερο από 0 για να καταστρέψουμε το Add to Cart button.

Αυτό θα δουλεύει Μπορούμε να το εξαρκτήσουμε σε ένα δημιουργικό πρόβλημα ή σε ένα getter, αν θέλαμε να το χρησιμοποιήσουμε κοινωνικά στη δημιουργία μας. Το πράγμα είναι ότι οι getters δεν λαμβάνουν αργουμένους για το δημιουργικό, αλλά μπορούμε να περάσουμε αργουμένους σε getters με την επιστροφή του. Για να σας δείξω, θα δημιουργήσω ένα getter που θα οδηγήσω product is in stock. Εδώ μπορούμε να επιστροφήσουμε ένα function που θα λαμβάνει ένα product ως ένα αργουμένο.

Αυτό το οδηγικό function θα λαμβάνει αν το product's inventory είναι μεγαλύτερο από 0. Επί και παρακολουθήσουμε το πρότυπο από το στήθος. Παρακολουθώντας το πρότυπο από το στήθος είναι καλύτερα. Ας χρησιμοποιήσουμε το getter στον πρότυπο.

Θα δημιουργήσω μια οικογένεια, product is in stock, που θα επιστρέψει το product is in stock getter. Τώρα μπορούμε να το χρησιμοποιήσουμε στο τεμπλίδι και να καταστρέψουμε το στήθος εάν το πρότυπο δεν είναι στον πρότυπο. Εντάξει ότι εδώ πρέπει να παρακολουθήσουμε το πρότυπο ως αργουμνό. Αυτό είναι ωραίο.

getters. product is in stock και να περάσουμε το product argument. destructuring για να παρακολουθήσουμε μόνο τα χρήματα που χρειαζόμαστε από το context object. Με χρησιμοποιώντας destructuring και το getter, η οδηγία μας βλέπει καλύτερη και είναι εύκολη να καταλαβαίνουμε από την πρώτη φορά.

Ας το δώσουμε σε το μπροζό. Θα προσθέσω δύο ipads στο καρτ, και δηλαδή έχουμε μόνο δύο δημιουργήσεις, το «ΑΤΟ ΚΑΡΤ» βασίλει. Σε το πρωτοκλίστικο κομπονέτ, χρησιμοποιούμε το Getter για να δείξουμε μόνο τα πρωτοκλίσματα που έχουμε στο κομμάτι. Αυτό που μπορούμε να κάνουμε είναι να δείξουμε όλες τα πρωτοκλίσματα και να καταστρέψουμε το Add to Cart button αν το πρωτοκλίσμα εξετάζεται.

Products μέσα στην πρωτοκλίση. Μετά από όλα τα πρωτοκλίσματα, μπορούμε να καταστρέψουμε αν το Inventory Attribute των πρωτοκλίσεων δεν είναι καλύτερο από 0 για να καταστρέψουμε το Add to Cart button. Αυτό θα δουλεύει Μπορούμε να το εξαρκτήσουμε σε ένα δημιουργικό πρόβλημα ή σε ένα getter, αν θέλαμε να το χρησιμοποιήσουμε κοινωνικά στη δημιουργία μας. Το πράγμα είναι ότι οι getters δεν λαμβάνουν αργουμένους για το δημιουργικό, αλλά μπορούμε να περάσουμε αργουμένους σε getters με την επιστροφή του.

Για να σας δείξω, θα δημιουργήσω ένα getter που θα οδηγήσω product is in stock. Εδώ μπορούμε να επιστροφήσουμε ένα function που θα λαμβάνει ένα product ως ένα αργουμένο. Αυτό το οδηγικό function θα λαμβάνει αν το product's inventory είναι μεγαλύτερο από 0. Επί και παρακολουθήσουμε το πρότυπο από το στήθος.

Παρακολουθώντας το πρότυπο από το στήθος είναι καλύτερα. Ας χρησιμοποιήσουμε το getter στον πρότυπο. Θα δημιουργήσω μια οικογένεια, product is in stock, που θα επιστρέψει το product is in stock getter. Τώρα μπορούμε να το χρησιμοποιήσουμε στο τεμπλίδι και να καταστρέψουμε το στήθος εάν το πρότυπο δεν είναι στον πρότυπο.

Εντάξει ότι εδώ πρέπει να παρακολουθήσουμε το πρότυπο ως αργουμνό. Αυτό είναι ωραίο. getters. product is in stock και να περάσουμε το product argument.

destructuring για να παρακολουθήσουμε μόνο τα χρήματα που χρειαζόμαστε από το context object. Με χρησιμοποιώντας destructuring και το getter, η οδηγία μας βλέπει καλύτερη και είναι εύκολη να καταλαβαίνουμε από την πρώτη φορά. Ας το δώσουμε σε το μπροζό. Θα προσθέσω δύο ipads στο καρτ, και δηλαδή έχουμε μόνο δύο δημιουργήσεις, το «ΑΤΟ ΚΑΡΤ» βασίλει.

This transcript is generated automatically from the lesson video. Spotted an inaccuracy? Let us know at team@vueschool.io.