Vue.js

Question

में एक वैश्विक डेटा संरचना मैं Vue.js. के साथ एक एकल पृष्ठ ऐप बना रहा हूं। यह अपेक्षाकृत सरल ऐप है, एक विस्तारित, राय वाली स्प्रेडशीट की तरह। मैं ऐप के विभिन्न दृश्यों को संभालने के लिए vue-router का उपयोग कर रहा हूं, कुछ नए डेटा दर्ज करने के लिए उपयोग किए जाते हैं, कुछ डेटा पर गणना करने के लिए उपयोग किए जाते हैं लेकिन सभी डेटा इंटरटवाइंड किया जाता है (दृश्य # 1 में दर्ज डेटा का उपयोग डेटा में दर्ज करने के लिए किया जाता है # 2 और फिर दोनों को # 3 में देखने की गणना करने के लिए उपयोग किया जाता है)।

इसका मतलब है कि मुझे वैश्विक डेटा संरचना की आवश्यकता है। मेरे शोध से मैंने पाया कि मेरे पास इसे संभालने के लिए कई विकल्प हैं:

• "उचित" तरीका: घटकों में ईवेंट उत्सर्जित करना और माता-पिता में उन्हें संभालना; उस के लिए एक छोटे से overcomplicated लगता है कि मैं क्या $parent.$data
• मेरे वर्तमान समाधान के माध्यम से घटक टेम्पलेट्स में सीधे माता पिता दायरे तक पहुँचने
• हासिल करना चाहते हैं, बच्चे के लिए माता-पिता डेटा संदर्भ बताए डेटा आपत्ति

तो जैसा:

const REPORTS = { 
    template: templates.reports, 
    data: function(){ 
    return this.$parent.$data 
    } 
}; 

हालांकि, मेरी छठी भावना मुझे बता रही है कि यह एक अच्छा अभ्यास नहीं है।

यदि मैं सही हूं, इसे प्राप्त करने के बेहतर तरीके क्या हैं: एक, वैश्विक डेटा संरचना, सभी घटकों से सुलभ?

Answer 1

एक central state management डॉक्स के रूप में कहते हैं क्या आप के लिए देख रहे है:

बड़े अनुप्रयोगों अक्सर कई घटकों और उन दोनों के बीच बातचीत में फैले राज्य के कई हिस्सों को होने की वजह से जटिलता में वृद्धि कर सकते हैं। इस समस्या को हल करने के लिए, Vue vuex प्रदान करता है: हमारी स्वयं की एल्म-प्रेरित राज्य प्रबंधन लाइब्रेरी। यह समय-समय पर शून्य-सेटअप पहुंच प्रदान करते हुए, vue-devtools में भी एकीकृत करता है।

तुम मेरे अन्य उत्तर पर एक नज़र हो सकता है here और here

Vuexstategetters के माध्यम से पढ़ा जा सकता है, तुल्यकालिक mutations का उपयोग कर अद्यतन, सभी Vue घटकों से actions के माध्यम से एसिंक्रोनस अद्यतन और यहां तक ​​कि विभिन्न modules में विभाजित ।