Vue Academy · पाठ

Vuex की मूल बातें

Vuex स्टोर और केंद्रीकृत स्थिति को समझिए

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

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

केंद्रीकृत स्थिति क्यों

जैसे-जैसे Vue app बड़े होते हैं, कई घटकों के बीच डेटा साझा करना कठिन हो जाता है। गहराई से नेस्टेड ट्री में प्रॉप्स को नीचे भेजना और घटनाएँ ऊपर भेजना अस्थिर होता है। Vuex किसी भी घटक द्वारा पढ़े और लिखे जा सकने वाले एकल, केंद्रीकृत स्टोर के ज़रिए इस समस्या को पूर्वानुमेय तरीके से हल करता है।

सत्य का एकमात्र स्रोत

Vuex एकतरफ़ा डेटा प्रवाह का पालन करता है। सभी साझा app स्थिति एक जगह रहती है, जिसे store कहा जाता है। घटक store से स्थिति पढ़ते हैं और नियंत्रित एपीआई के ज़रिए बदलाव का अनुरोध करते हैं, इसलिए आपको हमेशा पता रहता है कि डेटा कहाँ से आया और कैसे बदला।

Vuex इंस्टॉल करना

Vuex 4, Vue 3 के लिए बनाया गया संस्करण है। इसे अपने पैकेज प्रबंधक से इंस्टॉल करें, फिर store बनाएँ और उसे अपने app में रजिस्टर करें।

npm install vuex@4

Store बनाना

Store परिभाषित करने के लिए createStore का उपयोग करें। स्थिति विकल्प एक ऐसा फ़ंक्शन है जो आरंभिक प्रतिक्रियाशील स्थिति ऑब्जेक्ट लौटाता है।

import { createStore } from "vuex"

export const store = createStore({
  state() {
    return {
      count: 0,
      user: null
    }
  }
})

Store रजिस्टर करना

app.use(store) की मदद से store को अपने app में भेजें। इससे वह this.$store के ज़रिए हर घटक में उपलब्ध हो जाता है।

import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"

const app = createApp(App)
app.use(store)
app.mount("#app")

स्थिति प्रॉपर्टी

state ऑब्जेक्ट आपके app का डेटा रखता है। यह प्रतिक्रियाशील होता है: स्थिति बदलने पर इसका उपयोग करने वाला हर घटक अपने-आप फिर से रेंडर होता है। इसे अपने पूरे app का data() समझें।

state() {
  return {
    todos: [],
    isLoading: false,
    theme: "light"
  }
}

विकल्प एपीआई में स्थिति तक पहुँचना

किसी घटक के भीतर store तक this.$store.state के ज़रिए पहुँचें। कोई कंप्यूटेड प्रॉपर्टी मान को प्रतिक्रियाशील बनाए रखती है।

export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

टेम्पलेट में स्थिति का उपयोग

कंप्यूटेड प्रॉपर्टी के ज़रिए सामने लाने के बाद, टेम्पलेट में स्थिति का उपयोग किसी भी स्थानीय मान की तरह किया जाता है।

<template>
  <p>Current count: {{ count }}</p>
</template>

mapState सहायक

कई कंप्यूटेड प्रॉपर्टी हाथ से लिखना दोहरावपूर्ण होता है। mapState सहायक स्थिति के नामों की ऐरे से आपके लिए इन्हें बना देता है।

import { mapState } from "vuex"

export default {
  computed: {
    ...mapState(["count", "user"])
  }
}

नाम बदलने के साथ mapState

प्रॉपर्टी के नाम बदलने या स्थिति से व्युत्पन्न मानों की गणना करने के लिए mapState को एक ऑब्जेक्ट दें।

computed: {
  ...mapState({
    total: "count",
    userName: (state) => state.user ? state.user.name : "Guest"
  })
}

कम्पोज़िशन एपीआई में स्थिति तक पहुँचना

कम्पोज़िशन एपीआई के साथ store इंस्टेंस प्राप्त करने के लिए setup के भीतर useStore() कॉल करें, फिर कंप्यूटेड के ज़रिए स्थिति पढ़ें।

import { computed } from "vue"
import { useStore } from "vuex"

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    return { count }
  }
}

त्वरित जाँच

Vuex की मूलभूत बातों के बारे में अपनी समझ जाँचें।

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

पुनरावलोकन

Vuex एक केंद्रीकृत, प्रतिक्रियाशील store देता है जो सत्य के एकमात्र स्रोत के रूप में काम करता है। आप इसे createStore से बनाते हैं, app.use के ज़रिए रजिस्टर करते हैं और कंप्यूटेड प्रॉपर्टी या mapState सहायक के माध्यम से state पढ़ते हैं। कम्पोज़िशन एपीआई में आप useStore() से store तक पहुँचते हैं। अब आप सीखेंगे कि उस स्थिति को सुरक्षित रूप से कैसे बदला जाए।

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

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

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

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

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

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

क्या “Vuex की मूल बातें” पाठ निःशुल्क है?

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

“Vuex की मूल बातें” में मैं क्या सीखूँगा?

Vuex स्टोर और केंद्रीकृत स्थिति को समझिए आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

“Vuex की मूल बातें” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

Vuex की मूल बातें
Mutations और Actions
Getters और Modules

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