2017-04-23 18 views
9

के साथ vuex स्थिति को सिंक करने के लिए अनुशंसित रणनीति इस साधारण मामले की कल्पना करें। आपके पास एक वू जेएस एप्लिकेशन है जिसमें उपयोगकर्ता कार्य की सूचियां बना सकते हैं और उन्हें सॉर्ट कर सकते हैं। इन सूचियों को सर्वर द्वारा डेटाबेस में संग्रहीत किया जाना चाहिए। आइए मान लें कि हमारे पास ListComponent है जो यूएक्स का बड़ा हिस्सा है।सर्वर

मेरा सवाल यह है कि, मुझे फ्रंट एंड एंड बैक-एंड डेटा सिंक्रनाइज़ेशन को संभालने के लिए किस पैटर्न का उपयोग करना चाहिए?

ए) vuex जाएं: तथा vuex store में सक्रिय सूची (उन, दिखाया जा रहा बनाए या संपादित) संग्रहित करें। ListComponentstore और तब बदल देगा, सूची में किए गए परिवर्तन एक एपीआई के माध्यम से बैकएंड को भेजे जाएंगे।

बी) सीधे सर्वर पर जाएं: किसी भी सूची को दिखाए जाने, संपादित करने या बनाए जाने पर सर्वर पर ListComponent से सीधे पढ़ें और लिखें।

यदि निम्नलिखित ए है, तो किस आर्किटेक्चर में स्टोर होना चाहिए? मुझे सिंक्रनाइज़ेशन कैसे और कब लाया जाना चाहिए? मैं क्या बदल गया है और क्या नहीं है इसका ट्रैक रख सकता हूं?

+0

मैंने बस ए के साथ जाने का प्रयास करने में कुछ घंटे बिताए हैं। मैं एक खाली घटक और स्टोर मॉड्यूल में सभी तर्क के साथ समाप्त हुआ। बहुत सारे ओवरहेड की तरह माना जाता है, इसलिए मैं अपने घटक के भीतर तर्क और एपीआई कॉल करने के लिए वापस जा रहा हूं। –

उत्तर

7

दोनों आपके उपयोग के मामले के आधार पर सही हो सकते हैं। जिस एप्लिकेशन में मैं वर्तमान में निर्माण कर रहा हूं वह दोनों का उपयोग करता है।

बी का उपयोग कब करें: सीधे सर्वर पर जाएं यदि बी को सहेजने के लिए डेटा बहुत महत्वपूर्ण है तो बी का उपयोग करें। इस मामले में आप सीधे सर्वर पर जाना चाहते हैं और यह सत्यापित करने के लिए प्रतिक्रिया दे सकते हैं कि यह डीबी के प्रति प्रतिबद्ध था। हम व्यवस्थापक प्रक्रिया में बदलाव के लिए इस प्रक्रिया का उपयोग करते हैं। ध्यान दें कि आप सर्वर प्रतिक्रिया के बाद भी Vuex को अद्यतन कर सकते हैं और अभी भी अपने डेटा को पूरा करने के लिए Vuex का उपयोग कर सकते हैं।

ए का उपयोग कब करें: Vuex के माध्यम से जाएं यदि आपको तेजी से अनुभव की आवश्यकता है, तो ए का उपयोग करें, क्योंकि सर्वर के लिए कोई प्रतीक्षा नहीं है। वास्तव में बचत से पहले आपको आशावादी रूप से परिवर्तन प्रदर्शित करने के साथ ठीक होना चाहिए। दूसरा लाभ यह है कि आप Vuex to localStorage सिंक कर सकते हैं। हम इसका उपयोग उपयोगकर्ता वरीयताओं के लिए करते हैं जिनका उपयोग दृश्यों को अनुकूलित करने के लिए किया जाता है। पृष्ठ को धीमा करने के लिए बस इसे खराब करने का एक खराब अनुभव है।

ए का उपयोग कैसे करें: Vuex के माध्यम से जाएं ऐसा करने के कुछ तरीके हैं।यहाँ एक पैटर्न है:

  1. डिस्पैच Vuex घटक से कार्रवाई 1
  2. प्रतिबद्ध कार्रवाई से Vuex उत्परिवर्तन है कि राज्य अपडेट - इस एक आशावादी अद्यतन के रूप में आप यह सोचते हैं कर रहे हैं के माध्यम से यह
  3. डिस्पैच एक और Vuex कार्रवाई जाऊँगा है 2 लड़ाई 1 से - यह मान लिया गया है आप एक से अधिक कार्यों में इस कार्रवाई का पुन: उपयोग होगा, अन्यथा यह सब कार्रवाई में जा सकते हैं 1
  4. कार्रवाई 2 वादा लौटने पर सर्वर
  5. लिए डेटा भेजता है, कार्रवाई 2 उत्परिवर्तन करता Vuex राज्य
  6. अद्यतन करने के लिए
  7. उत्परिवर्तन किसी भी विसंगति (या त्रुटियों) को संभालने की जरूरत है

गणना Vuex की लागत

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

+0

मुझे समझ में नहीं आ रहा है 5. यदि चरण 4 सफल है, तो मुझे चरण 5 की आवश्यकता नहीं है क्योंकि मैंने पहले से ही चरण 2 में राज्य को अपडेट किया है। और यदि चरण 4 विफल रहता है, तो ऐसा लगता है कि यह चरण 6 का जिक्र है (यानी, एक त्रुटि संदेश दिखाएं, परिवर्तन को वापस करें, आदि) तो मैं उलझन में हूं कि चरण 5 का क्या मतलब है। – Yehosef

+0

@Yehosef चरण 2 एक आशावादी अद्यतन है। आपको यह सत्यापित करने के लिए कुछ कदम चाहिए कि सर्वर लौटाए गए डेटा आपके जैसा ही है। उदाहरण के लिए, यदि डेटा सर्वर पर अद्यतन करने में विफल रहा है या यदि डेटा किसी अन्य स्रोत द्वारा संशोधित किया गया था (जो आपके मामले पर लागू हो सकता है या नहीं)। आप सही हैं कि चरण 5 में आपको उत्परिवर्तन की आवश्यकता नहीं हो सकती है और यह केवल लौटाए गए परिणामों पर एक जांच हो सकती है। –