एक व्यू + वूएक्स प्रोजेक्ट का निर्माण

Question

मैं अपने वैश्विक कार्यों को कहां रखना है इस पर भ्रमित हूं। कई उदाहरणों में एक main.js फ़ाइल एक ऐप घटक को इंगित करती है और इसे HTML के भीतर कहीं भी रखा जाता है। यह वर्कफ़्लो मेरे लिए ठीक होगा अगर मैं इस ऐप घटक के भीतर बस अपना पूरा तर्क रखना चाहता था। लेकिन मैं लैरवेल कार्यक्षमता के साथ घटकों को जोड़ रहा हूं इसलिए यह मेरे लिए काम नहीं करता है।

वर्तमान में मेरी main.js फ़ाइल में विधियों का एक समूह है जो मुझे अपने ऐप में कहीं से भी एक्सेस करने की आवश्यकता है। इन विधियों में कोई प्रसारण कार्यक्रम नहीं होता है, इसलिए जब तक वे एक vue-resource उदाहरण प्राप्त करते हैं, तब तक उन्हें प्रभावी रूप से कहीं भी रखा जा सकता है।

मेरे main.js फ़ाइल:

https://github.com/stephan-v/BeerQuest/blob/develop/resources/assets/js/main.js

उम्मीद है कि किसी को मुझे बताओ, जहां मैं अपने दोस्ती तरीकों बन सकता था कर सकते हैं अगर मैं vuex या सामान्य रूप में उपयोग करने के लिए के बाद से यह सबसे अच्छा अभ्यास की तरह बिल्कुल नहीं लगता थे ।

धन्यवाद।

Answer 1

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

की जाँच करें: https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex

Getters Vuex में भंडारण से डेटा लाने के लिए इस्तेमाल किया जाता है। वे परिवर्तनों के प्रति प्रतिक्रियाशील हैं, जिसका अर्थ है कि यदि Vuex डेटा बदलता है, तो आपके घटक की जानकारी भी अपडेट की जाती है। आप इन्हें getters.js जैसे कुछ में डाल सकते हैं ताकि आप उन्हें किसी भी मॉड्यूल में आयात कर सकें।

क्रियाएं वे कार्य हैं जिन्हें आप सीधे कॉल करते हैं, यानी। acceptFriendRequest जब कोई उपयोगकर्ता बटन क्लिक करता है। वे आपके डेटाबेस से बातचीत करते हैं, और फिर उत्परिवर्तन प्रेषण करते हैं। इस ऐप में, सभी कार्य actions.js में हैं।

तो आप अपने घटक में this.acceptFriendRequest(recipient) पर कॉल करेंगे। यह आपके डेटाबेस को मित्र स्थिति अपडेट करने के लिए बताएगा, फिर आपको यह पुष्टि मिल जाएगी कि यह हुआ था। यही वह समय है जब आप एक उत्परिवर्तन भेजते हैं जो वर्तमान उपयोगकर्ताओं की Vuex के भीतर मित्रों की सूची अपडेट करता है।

एक उत्परिवर्तन नए राज्य को प्रतिबिंबित करने के लिए वूक्स में डेटा अपडेट करता है। जब ऐसा होता है, तो गेटटर में आपके द्वारा पुनर्प्राप्त किए जा रहे किसी भी डेटा को भी अपडेट किया जाता है।

import {addFriend} from './actions.js'; 
import {friends} from './getters.js'; 
new Vue({ 
    vuex:{ 
    getters:{ 
     friends 
    } 
    }, 
    methods:{ 
    addFriend 
    } 
} 

store.js:

export default { 
    state:{ 
    friends: [] 
    }, 
    mutations:{ 
    ADD_FRIEND(state, friend) { 
     state.friends.push(friend); 
    } 
    } 
} 

actions.js:

export default { 
    addFriend(friend){ 
    Vue.http.post('/users/1/friends',friend) 
     .then((response)=>{ 
     dispatch("ADD_FRIEND", response) //response is the new friend 
     }) 
    } 
} 

getters.js

export default { 
    friends(state) { 
    return state.friends; 
    } 
} 

तो सब यहाँ हर कदम की का एक उदाहरण है इनमें से अपनी फाइलों में व्यवस्थित हैं, और आप imp कर सकते हैं आपको किसी भी घटक में उन्हें शामिल करें। आप किसी भी घटक से this.addFriend(friend) पर कॉल कर सकते हैं, और फिर आपके गेटर को this.friends से एक्सेस किया जा सकता है जब उत्परिवर्तन होता है तो नए मित्र के साथ स्वचालित रूप से अपडेट हो जाएगा। आप हमेशा अपने ऐप में किसी भी दृश्य में एक ही डेटा का उपयोग कर सकते हैं और जानते हैं कि यह आपके डेटाबेस के साथ चालू है।

कुछ विविध सामान:

• ही टिककर खेल स्वचालित रूप से, एक चर के रूप में state प्राप्त ताकि आप हमेशा अपने Vuex दुकान के राज्य संदर्भित कर सकते हैं
• म्यूटेशन अतुल्यकालिक कभी नहीं किया जाना चाहिए। कार्यों में लाने/अपडेट करने और फिर अपने डेटा को अपडेट करने के लिए उत्परिवर्तन प्रेषण
• Vue Resource का उपयोग कर सेवाओं (या संसाधन) बनाने से संसाधनों को लाने/अपडेट करने/हटाने को और भी आसान बना दिया जाएगा। आप इन्हें अलग-अलग फ़ाइलों में डाल सकते हैं और डेटाबेस पुनर्प्राप्ति तर्क को अलग रखने के लिए उन्हें अपने actions.js में आयात कर सकते हैं। फिर आप Vue.http.get('/users/1') के बजाय FriendService.get({id: 1}) जैसे कुछ लिख रहे होंगे। https://github.com/vuejs/vue-resource/blob/master/docs/resource.md
• Vuex "समय-यात्रा" के लिए vue devtools के साथ काम करता है। आप हर उत्परिवर्तन की एक सूची देख सकते हैं जो उन्हें हुआ है और उन्हें दोबारा दोबारा दोबारा दोहराएं। डीबगिंग और देखने के लिए यह बहुत अच्छा है कि डेटा कहां बदला जा रहा है।