قم بإنشاء تطبيقات بسيطة تستند إلى الحالة بسهولة باستخدام مكتبة JavaScript هذه.
الماخذ الرئيسية
- Pinia هي مكتبة إدارة حالة لـ Vue توفر البساطة والكفاءة لتطوير التطبيقات ، مع التركيز على بساطتها ونهج بديهي.
- تتضمن المفاهيم الأساسية لـ Pinia الحاصل ، والإجراءات ، والتخزين ، والحالة ، والتي تسمح للمطورين بإدارة ومشاركة البيانات بشكل فعال في مكونات Vue الخاصة بهم.
- مقارنةً بـ Vuex ، تقدم Pinia نهجًا أكثر حداثة وبساطة ، وذلك باستخدام نظام تفاعل Vue وتوفير كتابة صارمة ودعم TypeScript لتطبيقات أكثر قوة مع عدد أقل من الأخطاء. إنه خيار قابل للتطبيق للمشاريع الجديدة أو الهجرة من Vuex.
هل أنت مطور Vue يتطلع إلى تبسيط إدارة حالتك والارتقاء بتطوير تطبيقك إلى آفاق جديدة؟ قل مرحباً لـ Pinia ، مكتبة إدارة الدولة المتغيرة لقواعد اللعبة لعشاق Vue.
ألق نظرة خطوة بخطوة على مفاهيم Pinia الأساسية وشاهد كيف يمكنك إطلاق العنان لإمكاناتها. اكتشف كيف تقارن هذه المكتبة مع Vuex وتعلم كيفية إنشاء تطبيق Pinia بسيط.
ما هو بينيا؟
Pinia هي مكتبة إدارة الدولة بشكل خاص صُنعت من أجل Vue، المصممة لتحقيق بساطة وكفاءة لا مثيل لها لمشاريع Vue الخاصة بك. تم تطوير Pinia لتوفير تجربة سلسة لمطوري Vue ، وتستلهم Pinia من أفضل ممارسات إدارة الحالة الحديثة مع كونها خفيفة الوزن للغاية ومباشرة للاندماج في تطبيقاتك.
تتمثل الفلسفة الكامنة وراء Pinia في الحفاظ على الحد الأدنى والأناقة للأشياء ، مما يسهل على المطورين إدارة حالة التطبيق. من خلال اتباع نهج بسيط وبديهي ، يتيح لك Pinia التركيز على الأمور الأكثر أهمية وتقديم تجربة مستخدم استثنائية عند إنشاء تطبيق Vue الخاص بك.
مفاهيم بينيا الأساسية
لتحقيق أقصى استفادة من Pinia ، من الضروري فهم مفاهيمها الأساسية.
حاصل
Getters in Pinia هي المسؤولة عن استخراج وإرجاع قيم معينة من حالة المتجر. من خلال تحديد الحاصل ، يمكنك الوصول بكفاءة إلى البيانات ومعالجتها دون التلاعب المباشر بالحالة الأساسية. فكر فيها على أنها خصائص محسوبة مصممة خصيصًا لحالة متجرك.
أجراءات
تلعب الإجراءات دورًا مهمًا في Pinia ، مما يتيح لك تعديل حالة المتجر من خلال إجراء عمليات غير متزامنة أو متزامنة. إنها بمثابة جسر بين مكونات التطبيق الخاص بك والمتجر ، مما يضمن أن طفرات الحالة تتبع أنماطًا يمكن التنبؤ بها وتلتزم بأفضل الممارسات.
محل
يمثل المتجر قلب Pinia ، ويغلف حالة التطبيق ، والأرقام ، والإجراءات ، والطفرات (إن وجدت). إنه يعمل كمصدر وحيد للحقيقة ، مما يجعل حالة التطبيق مركزية ويمكن الوصول إليها بسهولة من خلال مكوناتك.
ولاية
تشير الحالة إلى البيانات التي يديرها متجرك. إنها البيانات التفاعلية التي تعتمد عليها مكوناتك لعرض أحدث المعلومات للمستخدم. باستخدام كائن الحالة داخل المتجر ، يمكنك إدارة البيانات ومشاركتها عبر المكونات بسلاسة.
ماذا عن Vuex؟
قد تتساءل عن كيفية مقارنة Pinia بـ Vuex ، التي كانت مكتبة إدارة الدولة لمطوري Vue لبعض الوقت. في حين أن Vuex هو بلا شك حلاً قويًا وقويًا ، فإن Pinia يميز نفسه بنهج أكثر حداثة وبساطة.
يستخدم Pinia نظام تفاعل Vue لإدارة الحالة ، وتجنب الحاجة إلى أي تبعيات خارجية. هذا يعني أن نظام Pinia البيئي أكثر تركيزًا ويتجنب الانتفاخ المحتمل. بالإضافة إلى ذلك ، تتيح لك الكتابة الصارمة ودعم TypeScript الذي يوفره لك اكتشاف الأخطاء في وقت مبكر من عملية التطوير ، مما يؤدي إلى تطبيقات أكثر قوة مع عدد أقل من الأخطاء.
إذا كنت تبدأ مشروع Vue جديدًا أو تفكر في الهجرة من Vuex ، فإن Pinia تقدم بديلاً جذابًا يبسط إدارة الحالة دون المساومة على المرونة أو الأداء.
تطبيق Simple 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
