צור אפליקציות פשוטות מבוססות מדינה בקלות באמצעות ספריית JavaScript זו.

טייק אווי מפתח

  • Pinia היא ספריית ניהול מדינה עבור Vue שמביאה פשטות ויעילות לפיתוח אפליקציות, עם התמקדות במינימליזם וגישה אינטואיטיבית.
  • מושגי הליבה של Pinia כוללים קבלנים, פעולות, חנות ומצב, המאפשרים למפתחים לנהל ולשתף נתונים ביעילות ברכיבי ה-Vue שלהם.
  • בהשוואה ל-Vuex, Pinia מציעה גישה מודרנית ומינימליסטית יותר, תוך שימוש במערכת התגובתיות של Vue ומספקת הקלדה קפדנית ותמיכה ב-TypeScript עבור יישומים חזקים יותר עם פחות באגים. זוהי אפשרות ריאלית עבור פרויקטים חדשים או הגירה מ- Vuex.

האם אתה מפתח Vue שמעוניין לייעל את ניהול המדינה שלך ולקחת את פיתוח האפליקציה שלך לגבהים חדשים? תגיד שלום לפיניה, ספריית ניהול המדינה המשנה את המשחק עבור חובבי Vue.

תסתכל צעד אחר צעד על מושגי הליבה של פיניה וראה איך אתה יכול לנצל את הפוטנציאל שלה. גלה כיצד ספריה זו משתווה עם Vuex ולמד כיצד ליצור אפליקציית Pinia פשוטה.

מה זה פיניה?

פיניה היא ספריית ניהול ממלכתית במיוחד מעוצב עבור Vue, שנועד להביא פשטות ויעילות ללא תחרות לפרויקטים של Vue שלך. פיניה, שפותחה כדי לספק חוויה חלקה למפתחי Vue, שואבת השראה מהשיטות המומלצות של ניהול מדינה מודרני תוך קל משקל ופשוט לשילוב ביישומים שלך.

instagram viewer

הפילוסופיה מאחורי Pinia היא לשמור על דברים מינימליים ואלגנטיים, מה שהופך את זה למפתחים ללא מאמץ לנהל את מצב האפליקציה. בגישה פשוטה ואינטואיטיבית, Pinia מאפשרת לך להתמקד במה שחשוב ביותר ולספק חווית משתמש יוצאת דופן בעת ​​בניית אפליקציית Vue שלך.

קונספטי ליבה של פיניה

כדי להפיק את המרב מפניה, חיוני להבין את המושגים הבסיסיים שלה.

גטרס

גטרים בפניה אחראים לחילוץ והחזרת ערכים ספציפיים ממדינת החנות. על ידי הגדרת מגטרים, אתה יכול לגשת ביעילות לנתונים ולעבד אותם מבלי לבצע מניפולציה ישירה של המצב הבסיסי. חשבו עליהם כעל מאפיינים מחושבים המותאמים למצב החנות שלכם.

פעולות

לפעולות יש תפקיד מכריע בפניה, ומאפשרות לך לשנות את מצב החנות על ידי ביצוע פעולות א-סינכרוניות או סינכרוניות. הם משמשים כגשר בין רכיבי האפליקציה שלך לבין החנות, ומבטיחים שמוטציות במדינה עוקבות אחר דפוסים צפויים ודבקים בשיטות עבודה מומלצות.

חנות

החנות מייצגת את ליבה של פיניה, וכוללת את מצב האפליקציה, הגורמים, הפעולות והמוטציות (אם יש). הוא פועל כמקור יחיד של אמת, שומר על מצב היישום שלך מרוכז ונגיש בקלות בכל הרכיבים שלך.

מדינה

המדינה מתייחסת לנתונים שהחנות שלך מנהלת. אלו הנתונים התגובתיים שהרכיבים שלך מסתמכים עליהם כדי להציג את המידע העדכני ביותר למשתמש. על ידי שימוש באובייקט המצב בתוך החנות, אתה יכול לנהל ולשתף נתונים בצורה חלקה בין רכיבים.

מה לגבי Vuex?

אתה אולי תוהה איך Pinia משתווה ל-Veex, שהייתה ספריית ניהול מדינה עבור מפתחי Vue כבר די הרבה זמן. בעוד Vuex הוא ללא ספק פתרון חזק ועוצמתי, Pinia מייחד את עצמו עם גישה מודרנית ומינימליסטית יותר.

Pinia משתמש במערכת התגובתיות של Vue לניהול מצב, תוך הימנעות מהצורך בכל תלות חיצונית. המשמעות היא שהמערכת האקולוגית של פיניה ממוקדת יותר ונמנעת מנפיחות פוטנציאלית. בנוסף, ההקלדה הקפדנית והתמיכה ב-TypeScript שהיא מספקת מאפשרת לך לתפוס שגיאות בשלב מוקדם בתהליך הפיתוח, מה שמוביל ליישומים חזקים יותר עם פחות באגים.

אם אתה מתחיל פרויקט Vue חדש או שוקל לעבור מ-Veex, Pinia מציעה אלטרנטיבה אטרקטיבית המייעלת את ניהול המדינה מבלי להתפשר על גמישות או ביצועים.

אפליקציית Vue פשוטה באמצעות 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