Vue.js
Vuex

परिचय

Vuex क्या है?

Vuex, Vue.js के लिए एक आधिकारिक प्लगइन है जो आपके आवेदन के भीतर उपयोग के लिए एक केंद्रीकृत डेटास्टोर प्रदान करता है। यह फ्लक्स एप्लिकेशन आर्किटेक्चर से बहुत प्रभावित है जो एक यूनिडायरेक्शनल डेटा प्रवाह को सरल बनाता है जिससे एप्लिकेशन डिज़ाइन और रीज़निंग सरल हो जाती है।

Vuex एप्लिकेशन के भीतर डेटास्टोर सभी साझा एप्लिकेशन स्थिति रखता है। इस स्थिति को उत्परिवर्तन द्वारा बदल दिया जाता है जो प्रेषण के माध्यम से एक उत्परिवर्तन घटना को आमंत्रित करने वाली कार्रवाई के जवाब में किया जाता है।

Vuex एप्लिकेशन में डेटा प्रवाह का एक उदाहरण नीचे दिए गए आरेख में उल्लिखित है। MIT लाइसेंस के तहत इस्तेमाल किया गया आरेख, मूल रूप से आधिकारिक Vuex GitHub रेपो से ।

व्यक्तिगत Vue.js एप्लिकेशन घटकों को ही टिककर खेल के माध्यम से डेटा है, जो शुद्ध, रीड-ओनली वांछित डेटा की कॉपी लौटने कार्य हैं पुनः प्राप्त करने की दुकान वस्तु पहुँच सकते हैं।

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

तब परिवर्तन स्वचालित रूप से पूरे अनुप्रयोग में परिलक्षित होता है क्योंकि सभी घटक प्रतिक्रियाशील रूप से अपने गेटर्स के माध्यम से स्टोर से बंधे होते हैं।

एक उदाहरण एक vue परियोजना में vuex के उपयोग को दर्शाता है।

const state = {
    lastClickTime: null
}

const mutations = {
    updateLastClickTime: (state, payload) => {
      state.lastClickTime = payload
  }
}

const getters = {
  getLastClickTime: state => {
    return new Date(state.lastClickTime)
  }
}

const actions = {
    syncUpdateTime: ({ commit }, payload) => {
    commit("updateLastClickTime", payload)
  },
  asyncUpdateTime: ({ commit }, payload) => {
    setTimeout(() => {
      commit("updateLastClickTime", payload)
    }, Math.random() * 5000)
  }
}

const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

const { mapActions, mapGetters } = Vuex;

// Vue 
const vm = new Vue({
    el: '#container',
  store,
  computed: {
      ...mapGetters([
        'getLastClickTime'
    ])
  },
  methods: {
      ...mapActions([
        'syncUpdateTime',
      'asyncUpdateTime'
    ]),
    updateTimeSyncTest () {
        this.syncUpdateTime(Date.now())
    },
    updateTimeAsyncTest () {
        this.asyncUpdateTime(Date.now())
    }
  }
})

और उसी के लिए HTML टेम्पलेट:

<div id="container">
  <p>{{ getLastClickTime || "No time selected yet" }}</p>
  <button @click="updateTimeSyncTest">Sync Action test</button>
  <button @click="updateTimeAsyncTest">Async Action test</button>
</div>

1. यहाँ राज्य में lastClickTime प्रॉपर्टी को null के रूप में इनिशियलाइज़ किया गया है। गुणों को प्रतिक्रियाशील बनाए रखने के लिए डिफ़ॉल्ट मानों की यह स्थापना महत्वपूर्ण है। राज्य में उल्लिखित संपत्तियाँ उपलब्ध नहीं होंगी, लेकिन इसके बाद किए गए परिवर्तन गेटर्स का उपयोग करके सुलभ नहीं होंगे ।

2. इस्तेमाल किया गया गेटर, एक गणना की गई संपत्ति प्रदान करता है जिसे हर बार अपडेट किया जाएगा एक उत्परिवर्तन राज्य संपत्ति के मूल्य को अपडेट करता है।

3. केवल उत्परिवर्तनों को राज्य और इसके गुणों को बदलने की अनुमति है, उन्होंने कहा, यह केवल तुल्यकालिक रूप से करता है।

4. एसिंक्रोनस अपडेट के मामले में एक्शन का उपयोग किया जा सकता है, जहां एपीआई कॉल (यहां बेतरतीब ढंग से सेट किए गए समय का मजाक उड़ाया जाता है) कार्रवाई में बनाया जा सकता है, और प्रतिक्रिया मिलने के बाद राज्य में परिवर्तन करने के लिए एक म्यूटेशन किया जा सकता है। ।

क्यों Vuex का उपयोग करें?

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

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

VueJS घटक अलग निकाय हैं और वे आसानी से एक दूसरे के बीच डेटा साझा नहीं कर सकते हैं। Vuex बिना शेयर डेटा करने के लिए हम की जरूरत है emit डेटा के साथ घटना और उसके बाद सुनने और पकड़ने के साथ घटना on ।

घटक 1

this.$emit('eventWithDataObject', dataObject)

घटक 2

this.$on('eventWithDataObject', function (dataObject) {
    console.log(dataObject)
})

Vuex स्थापित होने से हम घटनाओं को सुनने की आवश्यकता के बिना किसी भी घटक से बस इसके डेटा तक पहुंच सकते हैं।

this.$store.state.myData

हम म्यूटेंट के साथ भी डेटा को सिंक्रोनाइज़ कर सकते हैं, एसिंक्रोनस क्रियाओं का उपयोग कर सकते हैं और गेट्टर फ़ंक्शंस के साथ डेटा प्राप्त कर सकते हैं।

गेट्टर फ़ंक्शन वैश्विक गणना वाले कार्यों के रूप में काम कर सकते हैं। हम उन्हें घटकों से एक्सेस कर सकते हैं:

this.$store.getters.myGetter

क्रियाएँ वैश्विक विधियाँ हैं। हम उन्हें घटकों से भेज सकते हैं:

this.$store.dispatch('myAction', myDataObject)

और उत्परिवर्तन vuex में डेटा बदलने का एकमात्र तरीका है। हम परिवर्तन कर सकते हैं:

this.$store.commit('myMutation', myDataObject)

Vuex कोड इस तरह दिखेगा

state: {
  myData: {
    key: 'val'
  }
},
getters: {
  myGetter: state => {
     return state.myData.key.length
  }
},
actions: {
  myAction ({ commit }, myDataObject) {
    setTimeout(() => {
      commit('myMutation', myDataObject)
    }, 2000)
  }
},
mutations: {
  myMutation (state, myDataObject) {
    state.myData = myDataObject
  }
}

Vuex कैसे स्थापित करें?

यदि आप Vuex का उपयोग कर रहे हैं, तो अधिकांश समय बड़े घटक आधारित अनुप्रयोगों में होगा जहां आप संभवतः एकल फ़ाइलों का उपयोग कर रहे हैं, तो Vueify के साथ संयोजन में Webpack या Browserify जैसे मॉड्यूल बंडल का उपयोग कर रहे हैं।

इस मामले में Vuex प्राप्त करने का सबसे आसान तरीका एनपीएम से है। Vuex को स्थापित करने के लिए नीचे दिए गए कमांड को चलाएं और इसे अपने एप्लिकेशन निर्भरता में सहेजें।

 npm install --save vuex

सुनिश्चित करें कि आप अपनी require('vue') विवरण के बाद निम्न पंक्ति रखकर Vuex को अपने Vue सेटअप के साथ लोड करते हैं।

Vue.use(require('vuex'))

सीडीएन पर Vuex भी उपलब्ध है; आप यहाँ से cnnjs का नवीनतम संस्करण ले सकते हैं ।

ऑटो खारिज करने योग्य सूचनाएं

यह उदाहरण कस्टम सूचनाओं को संग्रहीत करने के लिए गतिशील रूप से एक vuex मॉड्यूल पंजीकृत करेगा जो स्वचालित रूप से खारिज हो सकता है

notifications.js

vuex स्टोर को हल करें और कुछ स्थिरांक को परिभाषित करें

//Vuex store previously configured on other side
import _store from 'path/to/store';

//Notification default duration in milliseconds
const defaultDuration = 8000;

//Valid mutation names
const NOTIFICATION_ADDED = 'NOTIFICATION_ADDED';
const NOTIFICATION_DISMISSED = 'NOTIFICATION_DISMISSED';

हमारे मॉड्यूल प्रारंभिक अवस्था सेट करें

const state = {
  Notifications: []
}

हमारे मॉड्यूल गेटर्स सेट करें

const getters = {
  //All notifications, we are returning only the raw notification objects
  Notifications: state => state.Notifications.map(n => n.Raw)
}

हमारे मॉड्यूल कार्य सेट करें

const actions = {
  //On actions we receive a context object which exposes the 
  //same set of methods/properties on the store instance
  //{commit} is a shorthand for context.commit, this is an 
  //ES2015 feature called argument destructuring
  Add({ commit }, notification) {
    //Get notification duration or use default duration
    let duration = notification.duration || defaultDuration

    //Create a timeout to dismiss notification
    var timeOut = setTimeout(function () {
      //On timeout mutate state to dismiss notification
      commit(NOTIFICATION_DISMISSED, notification);
    }, duration);

    //Mutate state to add new notification, we create a new object 
    //for save original raw notification object and timeout reference
    commit(NOTIFICATION_ADDED, {
      Raw: notification,
      TimeOut: timeOut
    })
  },
  //Here we are using context object directly
  Dismiss(context, notification) {
    //Just pass payload
    context.commit(NOTIFICATION_DISMISSED, notification);
  }
}

हमारे मॉड्यूल म्यूटेशन सेट करें

const mutations = {
  //On mutations we receive current state and a payload
  [NOTIFICATION_ADDED](state, notification) {
    state.Notifications.push(notification);
  },
  //remember, current state and payload
  [NOTIFICATION_DISMISSED](state, rawNotification) {
    var i = state.Notifications.map(n => n.Raw).indexOf(rawNotification);
    if (i == -1) {
      return;
    }

    clearTimeout(state.Notifications[i].TimeOut);
    state.Notifications.splice(i, 1);
  }
}

परिभाषित राज्य, गेटर्स, एक्शन और म्यूटेशन के साथ हमारे मॉड्यूल को पंजीकृत करें

_store.registerModule('notifications', {
  state,
  getters,
  actions,
  mutations
});

प्रयोग

componentA.vue

यह घटक स्क्रीन के शीर्ष दाएं कोने पर बूटस्ट्रैप के अलर्ट के रूप में सभी सूचनाओं को प्रदर्शित करता है, प्रत्येक अधिसूचना को मैन्युअल रूप से खारिज करने की भी अनुमति देता है।

<template>
<transition-group name="notification-list" tag="div" class="top-right">
  <div v-for="alert in alerts" v-bind:key="alert" class="notification alert alert-dismissible" v-bind:class="'alert-'+alert.type">
    <button v-on:click="dismiss(alert)" type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <div>
      <div>
        <strong>{{alert.title}}</strong>
      </div>
      <div>
        {{alert.text}}
      </div>
    </div>
  </div>
</transition-group>
</template>

<script>
export default {
  name: 'arc-notifications',
  computed: {
    alerts() {
      //Get all notifications from store
      return this.$store.getters.Notifications;
    }
  },
  methods: {
    //Manually dismiss a notification
    dismiss(alert) {
      this.$store.dispatch('Dismiss', alert);
    }
  }
}
</script>
<style lang="scss" scoped>
$margin: 15px;

.top-right {
    top: $margin;
    right: $margin;
    left: auto;
    width: 300px;
    //height: 600px;
    position: absolute;
    opacity: 0.95;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    //background-color: red;
}
.notification {
    transition: all 0.8s;
    display: flex;
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    .close {
        position: absolute;
        right: 10px;
        top: 5px;
    }

    > div {
        position: relative;
        display: inline;
    }
}
.notification:last-child {
    margin-bottom: 0;
}
.notification-list-enter,
.notification-list-leave-active {
    opacity: 0;
    transform: translateX(-90px);
}
.notification-list-leave-active {
    position: absolute;
}
</style>

किसी अन्य घटक में अधिसूचना जोड़ने के लिए स्निपेट

//payload could be anything, this example content matches with componentA.vue 
this.$store.dispatch('Add', {
  title = 'Hello',
  text = 'World',
  type = 'info',
  duration = 15000
});