🕉️ 🐇 🙎🏻 VueJS के लिए Vuex Undo / Redo Plugin बनाना 🧕🏻 🧒🏽 🏌️

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

इस लेख में, मैं दिखाऊंगा कि कैसे Vuex का उपयोग करके रोलओक / रिटर्न को पूर्ववत करें / फिर से करें, जो डिबगिंग के दौरान डीबगिंग के समान काम करता है। इस सुविधा का उपयोग विभिन्न प्रकार के परिदृश्यों में किया जा सकता है, जटिल रूपों से लेकर ब्राउज़र-आधारित गेम तक।

आप समाप्त कोड को जीथब पर यहां देख सकते हैं और इस कोडपेन में डेमो की कोशिश कर सकते हैं । यदि आप किसी प्रोजेक्ट में इसका उपयोग करना चाहते हैं, तो मैंने एक NPM मॉड्यूल के रूप में एक प्लगइन बनाया, जिसे vuex-undo-redo कहा जाता है।

नोट: यह लेख मूल रूप से यहां Vue.js 2017/11/13 डेवलपर ब्लॉग पर पोस्ट किया गया था।

प्लगइन विन्यास

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

module.exports = { install(Vue) { Vue.mixin({ // Code goes here }); } };

एक परियोजना में इसका उपयोग करने के लिए, हम बस प्लगइन आयात कर सकते हैं और इसे कनेक्ट कर सकते हैं:

 import VuexUndoRedo from './plugin.js'; Vue.use(VuexUndoRedo);

विचार

यदि उपयोगकर्ता रद्द करना चाहता है, और फिर उसे दोहराना चाहता है तो यह सुविधा अंतिम म्यूटेशन को रोल करके काम करेगी। हम यह कैसे करते हैं?

दृष्टिकोण संख्या १

पहला संभावित दृष्टिकोण प्रत्येक म्यूटेशन के बाद रिपॉजिटरी की स्थिति का "स्नैपशॉट" लेना और स्नैपशॉट को एक सरणी में रखना है। पूर्ववत / फिर से करने के लिए, हम सही स्नैपशॉट प्राप्त कर सकते हैं और इसे स्टोरेज स्थिति से बदल सकते हैं।

इस दृष्टिकोण के साथ समस्या यह है कि रिपॉजिटरी की स्थिति एक जावास्क्रिप्ट ऑब्जेक्ट है। जब आप किसी सरणी में जावास्क्रिप्ट ऑब्जेक्ट डालते हैं, तो आप बस ऑब्जेक्ट का संदर्भ देते हैं। निम्नलिखित की तरह एक भोली कार्यान्वयन, काम नहीं करेगा:

 var state = { ... }; var snapshot = []; // Push the first state snapshot.push(state); // Push the second state state.val = "new val"; snapshot.push(state); // Both snapshots are simply a reference to state console.log(snapshot[0] === snapshot[1]); // true

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

दृष्टिकोण संख्या २

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

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

म्यूटेशन का पंजीकरण

Vuex म्यूटेशन की सदस्यता के लिए एक एपीआई विधि प्रदान करता है, जिसका उपयोग हम उन्हें पंजीकृत करने के लिए कर सकते हैं। हम इसे created हुक पर सेट करेंगे। कॉलबैक में, हम केवल एक सरणी में म्यूटेशन डालते हैं जिसे बाद में फिर से चलाया जा सकता है।

 Vue.mixin({ data() { return { done: [] } }, created() { this.$store.subscribe(mutation => { this.done.push(mutation); } } });

रोलबैक विधि

म्यूटेशन को रद्द करने के लिए, हम रिपॉजिटरी को साफ करते हैं और फिर पिछले एक को छोड़कर सभी म्यूटेशन को फिर से चलाते हैं। यहां बताया गया है कि कोड कैसे काम करता है:

अंतिम म्यूटेशन को निकालने के लिए pop ऐरे विधि का उपयोग करें।
विशेष म्यूटेशन EMPTY_STATE का उपयोग करके स्पष्ट स्टोर स्थिति (नीचे समझाया गया है)
प्रत्येक शेष उत्परिवर्तन को दोहराएं, इसे नए स्टोर में फिर से फिक्स करना। कृपया ध्यान दें कि इस प्रक्रिया के दौरान सदस्यता विधि अभी भी सक्रिय है, अर्थात, प्रत्येक म्यूटेशन को फिर से जोड़ा जाएगा। pop साथ इसे तुरंत हटा दें।

 const EMPTY_STATE = 'emptyState'; Vue.mixin({ data() { ... }, created() { ... }, methods() { undo() { this.done.pop(); this.$store.commit(EMPTY_STATE); this.done.forEach(mutation => { this.$store.commit(`${mutation.type}`, mutation.payload); this.done.pop(); }); } } });

सफाई की दुकान

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

डेवलपर को यह अपने दम पर करना चाहिए, क्योंकि जो प्लगइन हम बनाते हैं, उसकी दुकान तक पहुंच नहीं है, केवल Vue उदाहरण के लिए। यहाँ एक उदाहरण कार्यान्वयन है:

 new Vuex.Store({ state: { myVal: null }, mutations: { emptyState() { this.replaceState({ myval: null }); } } });

हमारे प्लगइन पर वापस लौटते हुए, emptyState म्यूटेशन को हमारे done सूची में नहीं जोड़ा जाना चाहिए, क्योंकि हम रोलबैक प्रक्रिया के दौरान इसे फिर से नहीं करना चाहते हैं। इसे निम्न तर्क से रोकें:

 Vue.mixin({ data() { ... }, created() { this.$store.subscribe(mutation => { if (mutation.type !== EMPTY_STATE) { this.done.push(mutation); } }); }, methods() { ... } });

वापसी विधि

आइए एक नई डेटा प्रॉपर्टी बनाएं, जो undone होगी। जब हम रोलबैक प्रक्रिया के दौरान done गए अंतिम म्यूटेशन को हटाते हैं, तो हम इसे इस एरे में रखते हैं:

 Vue.mixin({ data() { return { done: [], undone: [] } }, methods: { undo() { this.undone.push(this.done.pop()); ... } } });

अब हम एक ऐसा redo मेथड बना सकते हैं जो केवल अंतिम जोड़े गए undone म्यूटेशन को लेगा और इसे फिर से करेगा।

 methods: { undo() { ... }, redo() { let commit = this.undone.pop(); this.$store.commit(`${commit.type}`, commit.payload); } }

कोई वापसी संभव नहीं

यदि उपयोगकर्ता एक या एक से अधिक बार रद्दीकरण आरंभ करता है और फिर एक नई नई प्रतिबद्धता बनाता है, तो undone की सामग्री को अमान्य कर undone जाएगा। यदि ऐसा होता है, तो हमें undone खाली करना चाहिए।

जब हम एक प्रतिबद्धता जोड़ते हैं तो हम अपनी सदस्यता कॉलबैक से नए कमिट खोज सकते हैं। हालाँकि, तर्क मुश्किल है, क्योंकि कॉलबैक में यह पता लगाने का कोई स्पष्ट तरीका नहीं है कि एक नई प्रतिबद्धता क्या है और पूर्ववत / फिर से क्या है।

सबसे आसान तरीका न्यूमैटेशन फ्लैग को सेट करना है। यह डिफ़ॉल्ट रूप से सही होगा, लेकिन रोलबैक और रिटर्न के तरीके अस्थायी रूप से इसे गलत पर सेट करेंगे। यदि म्यूटेशन सही पर सेट है, तो subscribe कॉलबैक undone सरणी को साफ़ कर देगा।

 module.exports = { install(Vue) { Vue.mixin({ data() { return { done: [], undone: [], newMutation: true }; }, created() { this.$store.subscribe(mutation => { if (mutation.type !== EMPTY_STATE) { this.done.push(mutation); } if (this.newMutation) { this.undone = []; } }); }, methods: { redo() { let commit = this.undone.pop(); this.newMutation = false; this.$store.commit(`${commit.type}`, commit.payload); this.newMutation = true; }, undo() { this.undone.push(this.done.pop()); this.newMutation = false; this.$store.commit(EMPTY_STATE); this.done.forEach(mutation => { this.$store.commit(`${mutation.type}`, mutation.payload); this.done.pop(); }); this.newMutation = true; } } }); }, }

मुख्य कार्यक्षमता अब पूरी हो गई है! इसे परीक्षण करने के लिए अपने प्रोजेक्ट या मेरे डेमो में प्लगइन जोड़ें।

सार्वजनिक एपीआई

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

इसे सक्षम करने के लिए, प्लगइन सार्वजनिक एपीआई के भाग के रूप में दो कम्प्यूटेड गुण, canUndo और canRedo प्रदान कर सकता है। यह लागू करने के लिए तुच्छ है:

 module.exports = { install(Vue) { Vue.mixin({ data() { ... }, created() { ... }, methods: { ... }, computed: {}, computed: { canRedo() { return this.undone.length; }, canUndo() { return this.done.length; } }, }); }, }

VueJS के लिए Vuex Undo / Redo Plugin बनाना