Μια Εισαγωγή στην Πίνια στο Vue.js

Βασικά Takeaways

• Το Pinia είναι μια κρατική βιβλιοθήκη διαχείρισης για το Vue που φέρνει απλότητα και αποτελεσματικότητα στην ανάπτυξη εφαρμογών, με έμφαση στον μινιμαλισμό και μια διαισθητική προσέγγιση.
• Οι βασικές έννοιες του Pinia περιλαμβάνουν getters, actions, store και state, που επιτρέπουν στους προγραμματιστές να διαχειρίζονται αποτελεσματικά και να μοιράζονται δεδομένα στα στοιχεία Vue τους.
• Σε σύγκριση με το Vuex, το Pinia προσφέρει μια πιο σύγχρονη και μινιμαλιστική προσέγγιση, χρησιμοποιώντας το σύστημα αντιδραστικότητας του Vue και παρέχοντας αυστηρή υποστήριξη πληκτρολόγησης και TypeScript για πιο ισχυρές εφαρμογές με λιγότερα σφάλματα. Είναι μια βιώσιμη επιλογή για νέα έργα ή μετάβαση από το Vuex.

Είστε προγραμματιστής του Vue που θέλετε να βελτιώσετε τη διαχείριση της πολιτείας σας και να προωθήσετε την ανάπτυξη της εφαρμογής σας σε νέα ύψη; Πείτε γεια στην Pinia, την κρατική βιβλιοθήκη διαχείρισης που αλλάζει το παιχνίδι για τους λάτρεις του Vue.

Ρίξτε μια ματιά βήμα προς βήμα στις βασικές έννοιες του Pinia και δείτε πώς μπορείτε να ξεκλειδώσετε τις δυνατότητές του. Μάθετε πώς συγκρίνεται αυτή η βιβλιοθήκη με το Vuex και μάθετε πώς να δημιουργήσετε μια απλή εφαρμογή Pinia.

Τι είναι η Πίνια;

Η Pinia είναι μια κρατική βιβλιοθήκη διαχείρισης ειδικά φτιαγμένο για το Vue, σχεδιασμένο για να προσφέρει απαράμιλλη απλότητα και αποτελεσματικότητα στα έργα σας στο Vue. Αναπτύχθηκε για να παρέχει μια απρόσκοπτη εμπειρία στους προγραμματιστές του Vue, η Pinia εμπνέεται από τις βέλτιστες πρακτικές του σύγχρονη διαχείριση κατάστασης, ενώ είναι εξαιρετικά ελαφρύ και εύκολο να ενσωματωθεί στις εφαρμογές σας.

Η φιλοσοφία πίσω από το Pinia είναι να διατηρεί τα πράγματα minimal και κομψά, καθιστώντας εύκολη τη διαχείριση της κατάστασης της εφαρμογής από τους προγραμματιστές. Ακολουθώντας μια απλή και διαισθητική προσέγγιση, το Pinia σάς επιτρέπει να εστιάσετε σε αυτό που έχει μεγαλύτερη σημασία και να προσφέρετε μια εξαιρετική εμπειρία χρήστη κατά τη δημιουργία της εφαρμογής σας Vue.

Βασικές έννοιες Pinia

Για να αξιοποιήσετε στο έπακρο το Pinia, είναι απαραίτητο να κατανοήσετε τις βασικές του έννοιες.

Λήπτες

Οι Getters in Pinia είναι υπεύθυνοι για την εξαγωγή και την επιστροφή συγκεκριμένων τιμών από την κατάσταση του καταστήματος. Ορίζοντας λήπτες, μπορείτε αποτελεσματικά να έχετε πρόσβαση και να επεξεργάζεστε δεδομένα χωρίς να χειρίζεστε άμεσα την υποκείμενη κατάσταση. Σκεφτείτε τα ως υπολογισμένες ιδιότητες προσαρμοσμένες στην κατάσταση του καταστήματός σας.

Ενέργειες

Οι ενέργειες παίζουν κρίσιμο ρόλο στο Pinia, δίνοντάς σας τη δυνατότητα να τροποποιήσετε την κατάσταση του καταστήματος εκτελώντας ασύγχρονες ή σύγχρονες λειτουργίες. Λειτουργούν ως γέφυρα μεταξύ των στοιχείων της εφαρμογής σας και του αποθηκευτικού χώρου, διασφαλίζοντας ότι οι μεταλλάξεις κατάστασης ακολουθούν προβλέψιμα μοτίβα και συμμορφώνονται με τις βέλτιστες πρακτικές.

Κατάστημα

Το κατάστημα αντιπροσωπεύει την καρδιά της Pinia, ενσωματώνοντας την κατάσταση, τους λήπτες, τις ενέργειες και τις μεταλλάξεις της εφαρμογής (αν υπάρχουν). Λειτουργεί ως ενιαία πηγή αλήθειας, διατηρώντας την κατάσταση της εφαρμογής σας συγκεντρωμένη και εύκολα προσβάσιμη σε όλα τα στοιχεία σας.

κατάσταση

Το State αναφέρεται στα δεδομένα που διαχειρίζεται το κατάστημά σας. Είναι τα αντιδραστικά δεδομένα στα οποία βασίζονται τα στοιχεία σας για να εμφανίζουν τις πιο ενημερωμένες πληροφορίες στον χρήστη. Χρησιμοποιώντας το αντικείμενο κατάστασης μέσα στο κατάστημα, μπορείτε να διαχειρίζεστε και να μοιράζεστε απρόσκοπτα δεδομένα μεταξύ των στοιχείων.

Τι γίνεται με το Vuex;

Ίσως αναρωτιέστε πώς συγκρίνεται το Pinia με το Vuex, το οποίο ήταν μια κρατική βιβλιοθήκη διαχείρισης για τους προγραμματιστές του Vue εδώ και αρκετό καιρό. Ενώ το Vuex είναι αναμφίβολα μια ισχυρή και ισχυρή λύση, η Pinia ξεχωρίζει με μια πιο μοντέρνα και μινιμαλιστική προσέγγιση.

Η Pinia χρησιμοποιεί το σύστημα αντιδραστικότητας του Vue για τη διαχείριση της κατάστασης, αποφεύγοντας την ανάγκη για εξωτερικές εξαρτήσεις. Αυτό σημαίνει ότι το οικοσύστημα της Pinia είναι πιο συγκεντρωμένο και αποφεύγει το ενδεχόμενο φούσκωμα. Επιπλέον, η αυστηρή υποστήριξη πληκτρολόγησης και TypeScript που παρέχει σάς επιτρέπει να εντοπίζετε σφάλματα νωρίς στη διαδικασία ανάπτυξης, οδηγώντας σε πιο ισχυρές εφαρμογές με λιγότερα σφάλματα.

Εάν ξεκινάτε ένα νέο έργο Vue ή σκέφτεστε να μεταναστεύσετε από το Vuex, η Pinia προσφέρει μια ελκυστική εναλλακτική που βελτιστοποιεί τη διαχείριση κατάστασης χωρίς συμβιβασμούς στην ευελιξία ή την απόδοση.

Απλή εφαρμογή Vue με χρήση Pinia

Για να μάθετε τα πάντα για την Pinia, δοκιμάστε να δημιουργήσετε ένα δείγμα εφαρμογής. ένα βασικός διαχειριστής λίστας υποχρεώσεων είναι καλός υποψήφιος. Μια εφαρμογή λίστας υποχρεώσεων έχει μια απλή δομή όπου οι χρήστες μπορούν να προσθέτουν εργασίες, να επισημαίνουν και να υποδεικνύουν την ολοκλήρωσή τους και να διαγράφουν και να επεξεργάζονται εργασίες όπως απαιτείται. Η Pinia παρέχει τα εργαλεία που χρειάζεστε για να διαχειριστείτε την κατάσταση για τέτοιες εφαρμογές.

Προαπαιτούμενα

Πρώτα απ 'όλα, πρέπει να προετοιμάσετε το απαραίτητο περιβάλλον για αυτό το έργο, ξεκινώντας από το Vue CLI.

# To install Vue CLI:
npm install -g @vue/cli
# To create the project folder with Vue CLI:
vue create pinia-todo-app

Σε αυτό το στάδιο, μπορείτε να δείτε στο τερματικό ότι πρέπει να επιλέξετε μια προεπιλογή. Μπορείτε να συνεχίσετε επιλέγοντας Vue 3 από τις προεπιλεγμένες ρυθμίσεις? αυτό το παράδειγμα θα συνεχίστε να χρησιμοποιείτε το Vue 3.

Τώρα μπορείτε να εγκαταστήσετε το Pinia στον φάκελο του έργου σας:

cd pinia-todo-app
npm install pinia

Ρυθμίστε τα αρχεία σας

Χρειάζεται απλώς να επεξεργαστείτε μερικά αρχεία για να ολοκληρώσετε αυτό το δείγμα έργου.

Αρχικά, δημιουργήστε ένα αρχείο με το όνομα store.js σύμφωνα με το src ντοσιέ. Αυτό το αρχείο θα κρατήσει, θα προσθέσει και θα διαγράψει στοιχεία που θα προσθέσετε στη λίστα υποχρεώσεων. Θα τα κάνει όλα αυτά χρησιμοποιώντας βασικές έννοιες της Pinia.

// src/store.js
import { defineStore } from"pinia";
exportconst useTodoStore = defineStore("todo", {
 state: () => ({
 todos: [],
 }),
 actions: {
 addTodo(todoText) {
this.todos.push({ id: Date.now(), text: todoText });
 },
 removeTodo(todoId) {
this.todos = this.todos.filter((todo) => todo.id !== todoId);
 },
 },
});

Αλλά, φυσικά, αυτό το αρχείο από μόνο του δεν αρκεί. Πρέπει να συνδέσετε το store.js αρχείο με App.vue. Για να το κάνετε αυτό, αλλάξτε το src/App.vue αρχείο ως εξής:

// src/App.vue