Vue.js में पिनिया का परिचय

चाबी छीनना

• पिनिया Vue के लिए एक राज्य प्रबंधन पुस्तकालय है जो अतिसूक्ष्मवाद और सहज दृष्टिकोण पर ध्यान देने के साथ ऐप विकास में सरलता और दक्षता लाता है।
• पिनिया की मुख्य अवधारणाओं में गेटर्स, एक्शन, स्टोर और स्टेट शामिल हैं, जो डेवलपर्स को अपने Vue घटकों में डेटा को प्रभावी ढंग से प्रबंधित और साझा करने की अनुमति देते हैं।
• Vuex की तुलना में, Pinia अधिक आधुनिक और न्यूनतम दृष्टिकोण प्रदान करता है, Vue की प्रतिक्रियाशीलता प्रणाली का उपयोग करता है और कम बग के साथ अधिक मजबूत अनुप्रयोगों के लिए सख्त टाइपिंग और टाइपस्क्रिप्ट समर्थन प्रदान करता है। यह नई परियोजनाओं या Vuex से माइग्रेट करने के लिए एक व्यवहार्य विकल्प है।

क्या आप एक Vue डेवलपर हैं जो अपने राज्य प्रबंधन को सुव्यवस्थित करना चाहते हैं और अपने ऐप विकास को नई ऊंचाइयों पर ले जाना चाहते हैं? Vue उत्साही लोगों के लिए गेम-चेंजिंग राज्य प्रबंधन लाइब्रेरी, पिनिया को नमस्ते कहें।

पिनिया की मूल अवधारणाओं पर चरण-दर-चरण नज़र डालें और देखें कि आप इसकी क्षमता को कैसे अनलॉक कर सकते हैं। जानें कि इस लाइब्रेरी की तुलना Vuex से कैसे की जाती है और जानें कि एक सरल पिनिया ऐप कैसे बनाया जाता है।

पिनिया क्या है?

पिनिया विशेष रूप से एक राज्य प्रबंधन पुस्तकालय है Vue के लिए तैयार किया गया, आपके Vue प्रोजेक्ट्स में अद्वितीय सरलता और दक्षता लाने के लिए डिज़ाइन किया गया है। Vue डेवलपर्स के लिए एक सहज अनुभव प्रदान करने के लिए विकसित, पिनिया सर्वोत्तम प्रथाओं से प्रेरणा लेता है आधुनिक राज्य प्रबंधन आपके अनुप्रयोगों में एकीकृत करने के लिए बेहद हल्का और सीधा है।

पिनिया के पीछे का दर्शन चीजों को न्यूनतम और सुरुचिपूर्ण रखना है, जिससे डेवलपर्स के लिए एप्लिकेशन की स्थिति को प्रबंधित करना आसान हो जाता है। एक सरल और सहज दृष्टिकोण अपनाते हुए, पिनिया आपको उस चीज़ पर ध्यान केंद्रित करने की अनुमति देता है जो सबसे ज्यादा मायने रखती है और अपना Vue ऐप बनाते समय एक असाधारण उपयोगकर्ता अनुभव प्रदान करती है।

कोर पिनिया अवधारणाएँ

पिनिया का अधिकतम लाभ उठाने के लिए, इसकी मूल अवधारणाओं को समझना आवश्यक है।

टिककर खेल

पिनिया में गेटर्स स्टोर स्थिति से विशिष्ट मान निकालने और वापस करने के लिए जिम्मेदार हैं। गेटर्स को परिभाषित करके, आप अंतर्निहित स्थिति में सीधे हेरफेर किए बिना डेटा तक कुशलतापूर्वक पहुंच और प्रक्रिया कर सकते हैं। इन्हें अपने स्टोर की स्थिति के अनुरूप गणना की गई संपत्तियों के रूप में सोचें।

कार्रवाई

पिनिया में क्रियाएँ एक महत्वपूर्ण भूमिका निभाती हैं, जो आपको एसिंक्रोनस या सिंक्रोनस ऑपरेशन करके स्टोर की स्थिति को संशोधित करने में सक्षम बनाती हैं। वे आपके एप्लिकेशन के घटकों और स्टोर के बीच सेतु के रूप में काम करते हैं, यह सुनिश्चित करते हुए कि राज्य उत्परिवर्तन पूर्वानुमानित पैटर्न का पालन करते हैं और सर्वोत्तम प्रथाओं का पालन करते हैं।

इकट्ठा करना

स्टोर पिनिया के दिल का प्रतिनिधित्व करता है, जो एप्लिकेशन की स्थिति, गेटर्स, एक्शन और म्यूटेशन (यदि कोई हो) को समाहित करता है। यह सत्य के एकल स्रोत के रूप में कार्य करता है, आपके एप्लिकेशन की स्थिति को केंद्रीकृत रखता है और आपके सभी घटकों तक आसानी से पहुंच योग्य रहता है।

राज्य

राज्य उस डेटा को संदर्भित करता है जिसे आपका स्टोर प्रबंधित करता है। यह प्रतिक्रियाशील डेटा है जिस पर आपके घटक उपयोगकर्ता को नवीनतम जानकारी प्रदर्शित करने के लिए भरोसा करते हैं। स्टोर के भीतर स्टेट ऑब्जेक्ट का उपयोग करके, आप सभी घटकों में डेटा को निर्बाध रूप से प्रबंधित और साझा कर सकते हैं।

Vuex के बारे में क्या?

आप सोच रहे होंगे कि पिनिया की तुलना Vuex से कैसे की जाती है, जो काफी समय से Vue डेवलपर्स के लिए राज्य प्रबंधन लाइब्रेरी रही है। जबकि Vuex निस्संदेह एक मजबूत और शक्तिशाली समाधान है, पिनिया अधिक आधुनिक और न्यूनतम दृष्टिकोण के साथ खुद को अलग करता है।

पिनिया किसी भी बाहरी निर्भरता की आवश्यकता से बचते हुए, राज्य को प्रबंधित करने के लिए Vue की प्रतिक्रियाशीलता प्रणाली का उपयोग करता है। इसका मतलब यह है कि पिनिया पारिस्थितिकी तंत्र अधिक केंद्रित है और संभावित सूजन से बचाता है। इसके अतिरिक्त, इसके द्वारा प्रदान किया जाने वाला सख्त टाइपिंग और टाइपस्क्रिप्ट समर्थन आपको विकास प्रक्रिया में त्रुटियों को जल्दी पकड़ने की सुविधा देता है, जिससे कम बग के साथ अधिक मजबूत एप्लिकेशन बनते हैं।

यदि आप एक नया Vue प्रोजेक्ट शुरू कर रहे हैं या Vuex से माइग्रेट करने पर विचार कर रहे हैं, तो पिनिया एक आकर्षक विकल्प प्रदान करता है जो लचीलेपन या प्रदर्शन से समझौता किए बिना राज्य प्रबंधन को सुव्यवस्थित करता है।

पिनिया का उपयोग करते हुए सरल Vue ऐप

पिनिया के बारे में सब कुछ जानने के लिए, एक नमूना एप्लिकेशन बनाने का प्रयास करें; ए बुनियादी कार्य सूची प्रबंधक एक अच्छा उम्मीदवार है. टू-डू सूची ऐप में एक सरल संरचना होती है जहां उपयोगकर्ता टू-डू कार्यों को जोड़ सकते हैं, चिह्नित कर सकते हैं और उनके पूरा होने का संकेत दे सकते हैं, और आवश्यकतानुसार कार्यों को हटा और संपादित कर सकते हैं। पिनिया ऐसे अनुप्रयोगों के लिए राज्य को प्रबंधित करने के लिए आवश्यक उपकरण प्रदान करता है।

आवश्यक शर्तें

सबसे पहले, आपको Vue CLI से शुरुआत करते हुए, इस प्रोजेक्ट के लिए आवश्यक वातावरण तैयार करना होगा।

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

इस स्तर पर, आप टर्मिनल में देख सकते हैं कि आपको एक प्रीसेट का चयन करने की आवश्यकता है। आप चयन करके जारी रख सकते हैं दृश्य 3 डिफ़ॉल्ट सेटिंग्स से; यह उदाहरण होगा Vue 3 का उपयोग जारी रखें.

अब आप अपने प्रोजेक्ट फ़ोल्डर में पिनिया स्थापित कर सकते हैं:

cd pinia-todo-app
npm install 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);
 },
 },
});

लेकिन, निःसंदेह, यह फ़ाइल अकेले पर्याप्त नहीं है। आपको लिंक करना होगा स्टोर.जे.एस के साथ फ़ाइल करें ऐप.व्यू. ऐसा करने के लिए, बदलें src/App.vue फ़ाइल इस प्रकार है:

// src/App.vue