Vue Academy · पाठ

Pinia स्थायित्व और DevTools

pinia-plugin-persistedstate, केवल विशिष्ट फ़ील्ड को बनाए रखना और Pinia DevTools में टाइम-ट्रैवल

पाठ 4, कुल 4 में से13 चरण

Pinia स्थायित्व और DevTools, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्टोर की स्थिति को सुरक्षित रखना

डिफ़ॉल्ट रूप से, पृष्ठ को दोबारा लोड करने पर Pinia की स्थिति खो जाती है। इसे बनाए रखने के लिए pinia-plugin-persistedstate प्लगइन का उपयोग कीजिए, जो स्थिति को localStorage या sessionStorage के साथ समकालिक करता है।

प्लगइन इंस्टॉल करना

Pinia इंस्टेंस पर प्लगइन को एक बार रजिस्टर कीजिए। इसके बाद हर स्टोर इसे इस्तेमाल करने का विकल्प चुन सकता है।

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

किसी स्टोर पर स्थायित्व सक्षम करना

स्टोर विकल्पों में persist: true सेट कीजिए। अब पूरी स्थिति अपने-आप सुरक्षित और पुनर्स्थापित हो जाएगी।

export const useUserStore = defineStore('user', {
  state: () => ({ name: '', token: '' }),
  persist: true
})

स्टोरेज चुनना

storage विकल्प यह चुनता है कि डेटा कहाँ सुरक्षित किया जाए। उस डेटा के लिए sessionStorage का उपयोग कीजिए जिसे टैब बंद होने पर मिट जाना चाहिए।

persist: {
  storage: sessionStorage
}

केवल कुछ फ़ील्ड सुरक्षित रखना

paths विकल्प यह सीमित करता है कि स्थिति की कौन-सी कुंजियाँ सुरक्षित की जाएँ। यह टोकन को बनाए रखने, लेकिन अस्थायी यूआई फ़्लैग को नहीं रखने के लिए उपयुक्त है।

persist: {
  paths: ['token', 'name'] // 'isLoading' not persisted
}

स्टोर का क्रमबद्धीकरण

स्थायित्व, स्थिति को JSON में क्रमबद्ध करके काम करता है। मान JSON-सुरक्षित होने चाहिए — सामान्य ऑब्जेक्ट, ऐरे, स्ट्रिंग और संख्याएँ। फ़ंक्शन, मैप और क्लास के इंस्टेंस के लिए कस्टम क्रमबद्धक की आवश्यकता होती है।

persist: {
  serializer: {
    serialize: JSON.stringify,
    deserialize: JSON.parse
  }
}

Pinia डेवलपर टूल

Vue Devtools इंस्टॉल होने पर Pinia एक समर्पित पैनल जोड़ता है। आप हर स्टोर का निरीक्षण कर सकते हैं, स्थिति में होने वाले बदलावों को लाइव देख सकते हैं और मानों को सीधे संपादित कर सकते हैं।

समय में पीछे जाकर डीबग करना

हर ऐक्शन डेवलपर टूल की टाइमलाइन पर दिखाई देता है। आप समय में पीछे जा सकते हैं: किसी बग को दोबारा उत्पन्न करने के लिए पिछली स्थिति पर लौटिए, फिर दोबारा आगे बढ़िए।

SSR और स्टोर हाइड्रेशन

सर्वर-साइड रेंडरिंग में सर्वर स्टोर को भरता है, फिर क्लाइंट को उसी डेटा के साथ हाइड्रेट करना होता है, ताकि मार्कअप मेल खाए। असंगत स्थिति हाइड्रेशन संबंधी चेतावनियाँ उत्पन्न करती है।

Nuxt के साथ Pinia

@pinia/nuxt मॉड्यूल Pinia को Nuxt में जोड़ता है और SSR हाइड्रेशन को अपने-आप संभालता है। सर्वर रेंडर के दौरान भरी गई स्थिति को पृष्ठ में क्रमबद्ध किया जाता है और क्लाइंट पर पुनर्स्थापित किया जाता है।

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

स्थायित्व को SSR के साथ संयोजित करना

सावधान रहिए: सर्वर पर localStorage मौजूद नहीं होता। स्थायित्व प्लगइन इसका पता लगाते हैं और केवल क्लाइंट पर चलते हैं, इसलिए SSR हाइड्रेशन सर्वर की स्थिति का उपयोग करता है और उसके बाद स्थायित्व की परतें लागू होती हैं।

त्वरित जाँच

स्थायित्व और डेवलपर टूल के अपने ज्ञान की जाँचिए।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने स्थायित्व और टूलिंग सीखी:

pinia-plugin-persistedstate स्थिति को स्थानीय या सत्रीय स्टोरेज में सुरक्षित करता है।
storage और paths विकल्प यह नियंत्रित करते हैं कि क्या और कहाँ सुरक्षित किया जाए।
स्थिति को JSON में क्रमबद्ध किया जाता है, इसलिए मान JSON-सुरक्षित होने चाहिए।
डेवलपर टूल लाइव निरीक्षण और समय में पीछे जाकर डीबग करने की सुविधा देते हैं; @pinia/nuxt SSR हाइड्रेशन संभालता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 42
पाठ: 156

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Pinia स्थायित्व और DevTools” पाठ निःशुल्क है?

हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Pinia स्थायित्व और DevTools” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Pinia स्थायित्व और DevTools” में मैं क्या सीखूँगा?

pinia-plugin-persistedstate, केवल विशिष्ट फ़ील्ड को बनाए रखना और Pinia DevTools में टाइम-ट्रैवल आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Pinia स्थायित्व और DevTools” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

Pinia बनाम Vuex: बदलाव क्यों हुआ
defineStore: स्थिति, गेटर और ऐक्शन
स्टोर को संयोजित करना और क्रॉस-स्टोर पहुँच
Pinia स्थायित्व और DevTools

← Vue Academy पर वापस जाएँ