VueJS के लिए एक सरल राज्य मशीन

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

चर्चा ने उन सभी विषयों के करीब से संपर्क किया, जिन्होंने घटकों को लिखा था। कल्पना कीजिए। आप एक घटक लिख रहे हैं जो डेटा का अनुरोध करता है, और आपको क्वेरी चलने के दौरान स्पिनर को प्रदर्शित करने की आवश्यकता होती है। आमतौर पर ऐसे मामलों में आप एक बूलियन वैरिएबल isLading बनाते हैं। प्रारंभ में, isLoading = false, और डेटा का अनुरोध करने से पहले, आप isLading चर को सही पर सेट करें। डेटा आने के बाद, आपने इसे फिर से गलत पर सेट कर दिया है। स्पिनर विजिबिलिटी को isLading से बांधा गया है।

यह दृष्टिकोण महान काम करता है। लेकिन घटक शायद ही कभी इतना सरल है। और काम के दौरान, विभिन्न राज्यों को संग्रहीत करने वाले तार्किक चर बनाने के लिए अभी भी आवश्यक है। समस्या यह है कि यदि आपके पास एक राज्य चर है, तो यह दो राज्यों को उत्पन्न करता है, और दो तार्किक चर में पहले से ही चार राज्य हैं, तीन - आठ, आदि। और परेशानी यह है, प्रोग्रामर एक गलती कर सकता है और किसी भी राज्य को संसाधित नहीं कर सकता है जो सिस्टम में आ सकता है। और यह एक त्रुटि की ओर जाता है। इसके अलावा, इस तरह के एक घटक को समझना मुश्किल है और परिस्थितियों को बनाने के लिए आवश्यक है।

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

इस विषय पर काफी कुछ लेख हैं (उदाहरण के लिए, Vue में Finite State Machines , लेकिन उनमें से अधिकांश, एक संक्षिप्त सिद्धांत के बाद, तैयार पुस्तकालयों में से एक को जोड़ने की सलाह देते हैं। उदाहरण के लिए, davidkpiano / xstate ।

मैंने सोचा कि एक्सस्टेट बहुत बोझिल था और अपनी बाइक को आजमाना चाहता था। इसके अलावा, यह मेरे लिए एक नया पैटर्न बनाने का एक बड़ा कारण है।

यहाँ कोड के साथ खेलने के लिए कोड है - Vue के साथ राज्य मशीन, संस्करण 2 । और यहां कच्चा संस्करण है, थोड़ा अलग दृष्टिकोण के साथ - राज्य मशीन Vue के साथ, संस्करण 1 ।
मैंने स्टेट मशीन से लेख शुरू किया।

तो राज्य मशीन:

class StateMachine { constructor (initialState, transitions) { this.state = initialState this.transitions = transitions } transition (nextState, method, params) { const transitionsArray = this.transitions[this.state] if(transitionsArray.indexOf(nextState) === -1) return this.state if(method) method(...params) this.state = nextState return this.state } } 

इसे इस तरह से शुरू करें:

 const machine = new StateMachine('idle', { idle: ['waitingConfirmation'], waitingConfirmation: ['idle','waitingData'], waitingData: ['dataReady', 'dataProblem'], dataReady: ['waitingConfirmation'], dataProblem: ['waitingConfirmation'] }) 

घटक विधियों में, संक्रमण फ़ंक्शन बनाएँ:

 transition(nextState, method = null, params = []) { this.machineState = machine.transition(nextState, method, params) } 

घटनाओं में, हम तुरंत लिखते हैं कि हम कहाँ जाना चाहते हैं:

 @click=“transition('waitingConfirmation')" 

यदि आपको उसी समय घटक विधि को कॉल करने की आवश्यकता है, तो इसे लिखें:

 @click="transition('waitingData', getData, [222])” 

दूसरा पैरामीटर घटक विधि है जिसे इस संक्रमण के साथ बुलाया जाना चाहिए।
तीसरा पैरामीटर इस विधि के लिए चर का एक सरणी है।

विधियों के अंदर, कॉल है:

 this.transition('dataReady') 

मैंने जानबूझकर वी-इफ के साथ बटन नहीं छिपाए थे, बस अब के लिए, उनके फ़ॉन्ट का रंग ग्रे कर दें। लेकिन यह स्पष्ट है कि अगर मशीन अनुमति नहीं देती है तो उन पर क्लिक करना काम नहीं करता है।

सामान्य तौर पर, सब कुछ काम करता है, समाधान बहुत आसान है। और सबसे महत्वपूर्ण बात, हम घटक के संचालन को घोषित करने में कामयाब रहे। मैं स्वयं इस दृष्टिकोण को एक वास्तविक अनुप्रयोग में लागू करने के लिए लगभग तैयार हूं, लेकिन मैं इस दृष्टिकोण के पेशेवरों और विपक्षों को समझना चाहता हूं, और अधिक अनुभवी विशेषज्ञों से सलाह सुनना चाहता हूं।