Checkout
In this lesson of the Vuex course, it’s time to let the users check out after they’ve added some sweet stuff to their shopping cart.
A checkout process is usually responsible for multiple things, some of them could be:
- Checking if the items are still in stock
- Interacting with the payment processor
- Emptying the cart
- Reporting back to the user if the purchase was successful or not
In this vue.js tutorial, we’re doing a simplified version of a checkout process, but what we already know is that multiple things will need to take place.
We’ve said it before, and you probably remember, but we’re going to repeat ourselves: In Vuex, actions are responsible for the logic of when a mutation should be dispatched, while each mutation is only responsible for one single state change.
Can you imagine how we’re going to structure our checkout action?
LESSON TRANSCRIPT
Αν έχουμε κάποια καλή πράγματα στην καρτή μας, πρέπει να μπορούμε να το κατασκευάσουμε. Όταν ένα χρηματοί προσπαθούν να το κατασκευάσουν, μπορούμε να δείξουμε ένα μήνυμα αν η κατασκευή έχει συμφωνηθεί ή αν δεν. Αν έχει συμφωνηθεί, το πράγμα θα πρέπει να εξαιρεθεί από την καρτή, οπότε ο χρηματοί δεν κάνουν την ίδια κατασκευή συμφωνικά. Για να το κατασκευάσουμε, θα χρησιμοποιήσουμε την «ΠΑΙ ΠΡΟΔΑΙΚΤΑΙΣ» εργασία από το ShopJS.
Αυτ Συνταστείτε τι έδωσαμε στο μήνυμα για αξιόν, όταν συνεχίζουμε με ένα σύγχρονο κόδιο, όπως τα AjaxCalls, δημιουργούμε αξιόν. Επομένως, θα δημιουργήσω ένα αξιόν Checkout. Εδώ θα οδηγήσουμε το method byProducts. Θα το περπατήσω με την καρδιά που εχει τα συγκεκριμένα προτακτικά.
Το επόμενο αργουμένο είναι το callback function to run on Success. Αυτό που θέλουμε να κάνουμε στο Success είναι να κλείνουμε την καρδιά και να δημιουργήσουμε το SuccessMessage στο χρηματιστικό. Επομένως, μπορούμε να ξεκινήσουμε με την που θα εφαρμοποιήσουμε αργότερα. Επιπλέον, μπορούμε να εφαρμοποιήσουμε μια μοτοσυκλέτωση στρατιώτητας και ένα στρατιώτητας σε ευκαιρία.
Θα εφαρμοποιήσουμε επίσης αυτή την μοτοσυκλέτητα αργότερα. Το τρίτο αργουμνό του byProducts function είναι το callback to runOnFailure. Οπότε, ακόμα, μπορούμε να εφαρμοποιήσουμε μια μοτοσυκλέτωση στρατιώτητας και να εφαρμοποιήσουμε ένα στρατιώτητα σε φύση. Ας θεωρούμε ότι μπορούμε να χρησιμοποιήσουμε το ES6ArgumentDistractShrink για να Η δημιουργία μας λειτουργεί καλώς.
Ας δημιουργήσουμε την προϊόντα του CheckoutStatus στο State. Τώρα μπορούμε να δημιουργήσουμε τις μυτασίες. Θα ξεκινήσω με την μυτασία SetCheckoutStatus. Εδώ χρειαζόμαστε ένα νέο Status.
CheckoutStatus στο PastStatus. Στην επόμενη, χρειαζόμαστε η μυτασία EmptyCard. Card στο EmptyArray. Τώρα που έχουμε την εργασία, Η μόνη πράγματα που χάσαμε για να καταστρέψουμε είναι ένα μεγάλο βαθμό για να δημιουργήσουμε την καταστρέψη.
dispatch και το όνομα της καταστρέψης, το οποίο είναι Checkout. Από το βαθμό μπορούμε να δημιουργήσουμε την καταστρέψη. Αυτό το μήνυμα πρέπει να δείξει μετά από την προσπαθία του χρησιμοποιούντας την καταστρέψη, δηλαδή αν η καταστρέψη δεν είναι νουλ. Μπο Ας το προσπαθήσουμε στο μπροζόρ, προσπαθήσουμε κάποια προϊόντα με την καρδιά, κατασκευάζουμε, και πέτρε, οπότε τίποτα δεν αλλάζει στην καρδιά μας.
Κατασκευάζουμε πάλι, και επίσης πέτρε, κατασκευάζουμε πάλι, πέτρε, και τελικά πέτρε. Έτσι, τώρα η καρδιά μας είναι ανοιχτή, το τότο λάβει στο 0, και βλέπουμε την καλύτερη μήνυση στο τέλος. Εδώ μπορούμε να κατασκευάζουμε το κανάλι της καρδιάς αν η καρδιά είναι ανοιχτή. Επίσης, αν θέλουμε να κάνουμε Για παράδειγμα, δείτε ένα μοντέλο, αν το αφήνει, μπορούμε να επιτρέψουμε ένα πρόσφυγμα από την αξιότητα.
Αν έχουμε κάποια καλή πράγματα στην καρτή μας, πρέπει να μπορούμε να το κατασκευάσουμε. Όταν ένα χρηματοί προσπαθούν να το κατασκευάσουν, μπορούμε να δείξουμε ένα μήνυμα αν η κατασκευή έχει συμφωνηθεί ή αν δεν. Αν έχει συμφωνηθεί, το πράγμα θα πρέπει να εξαιρεθεί από την καρτή, οπότε ο χρηματοί δεν κάνουν την ίδια κατασκευή συμφωνικά. Για να το κατασκευάσουμε, θα χρησιμοποιήσουμε την «ΠΑΙ ΠΡΟΔΑΙΚΤΑΙΣ» εργασία από το ShopJS.
Αυτ Συνταστείτε τι έδωσαμε στο μήνυμα για αξιόν, όταν συνεχίζουμε με ένα σύγχρονο κόδιο, όπως τα AjaxCalls, δημιουργούμε αξιόν. Επομένως, θα δημιουργήσω ένα αξιόν Checkout. Εδώ θα οδηγήσουμε το method byProducts. Θα το περπατήσω με την καρδιά που εχει τα συγκεκριμένα προτακτικά.
Το επόμενο αργουμένο είναι το callback function to run on Success. Αυτό που θέλουμε να κάνουμε στο Success είναι να κλείνουμε την καρδιά και να δημιουργήσουμε το SuccessMessage στο χρηματιστικό. Επομένως, μπορούμε να ξεκινήσουμε με την που θα εφαρμοποιήσουμε αργότερα. Επιπλέον, μπορούμε να εφαρμοποιήσουμε μια μοτοσυκλέτωση στρατιώτητας και ένα στρατιώτητας σε ευκαιρία.
Θα εφαρμοποιήσουμε επίσης αυτή την μοτοσυκλέτητα αργότερα. Το τρίτο αργουμνό του byProducts function είναι το callback to runOnFailure. Οπότε, ακόμα, μπορούμε να εφαρμοποιήσουμε μια μοτοσυκλέτωση στρατιώτητας και να εφαρμοποιήσουμε ένα στρατιώτητα σε φύση. Ας θεωρούμε ότι μπορούμε να χρησιμοποιήσουμε το ES6ArgumentDistractShrink για να Η δημιουργία μας λειτουργεί καλώς.
Ας δημιουργήσουμε την προϊόντα του CheckoutStatus στο State. Τώρα μπορούμε να δημιουργήσουμε τις μυτασίες. Θα ξεκινήσω με την μυτασία SetCheckoutStatus. Εδώ χρειαζόμαστε ένα νέο Status.
CheckoutStatus στο PastStatus. Στην επόμενη, χρειαζόμαστε η μυτασία EmptyCard. Card στο EmptyArray. Τώρα που έχουμε την εργασία, Η μόνη πράγματα που χάσαμε για να καταστρέψουμε είναι ένα μεγάλο βαθμό για να δημιουργήσουμε την καταστρέψη.
dispatch και το όνομα της καταστρέψης, το οποίο είναι Checkout. Από το βαθμό μπορούμε να δημιουργήσουμε την καταστρέψη. Αυτό το μήνυμα πρέπει να δείξει μετά από την προσπαθία του χρησιμοποιούντας την καταστρέψη, δηλαδή αν η καταστρέψη δεν είναι νουλ. Μπο Ας το προσπαθήσουμε στο μπροζόρ, προσπαθήσουμε κάποια προϊόντα με την καρδιά, κατασκευάζουμε, και πέτρε, οπότε τίποτα δεν αλλάζει στην καρδιά μας.
Κατασκευάζουμε πάλι, και επίσης πέτρε, κατασκευάζουμε πάλι, πέτρε, και τελικά πέτρε. Έτσι, τώρα η καρδιά μας είναι ανοιχτή, το τότο λάβει στο 0, και βλέπουμε την καλύτερη μήνυση στο τέλος. Εδώ μπορούμε να κατασκευάζουμε το κανάλι της καρδιάς αν η καρδιά είναι ανοιχτή. Επίσης, αν θέλουμε να κάνουμε Για παράδειγμα, δείτε ένα μοντέλο, αν το αφήνει, μπορούμε να επιτρέψουμε ένα πρόσφυγμα από την αξιότητα.
This transcript is generated automatically from the lesson video. Spotted an inaccuracy? Let us know at team@vueschool.io.
