2017-06-03 23 views
9

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

आपसे एक सवाल है कि आप पहले से ही का जवाब जानने है, और आप बाद में मिल सके सार्वजनिक रूप से है कि ज्ञान दस्तावेज़ के लिए ताकि दूसरों (आप सहित) चाहते हैं, तो।

बेशक, मेरा जवाब आदर्श नहीं हो सकता है, इसके अलावा मुझे पता है कि यह नहीं है, यह मुख्य बिंदु है कि मैं इसे पोस्ट करने के लिए क्यों पोस्ट कर रहा हूं।

नोट, मैं उदाहरण में क्रियाओं का उपयोग नहीं कर रहा हूं। विचार वही है।

के समस्या बताते हुए के साथ शुरू करते हैं:

कल्पना कीजिए हम App.vue जो गतिशील रूप से अपने स्थानीय घटक Hello नामित उत्पन्न करता है।

<template> 
    <div id="app"> 
    <div> 
     <hello v-for="i in jobs" :key="i" :id="i"></hello> 
     <button @click="addJob">New</button> 
    </div> 
    </div> 
</template> 

<script> 
import Hello from './components/Hello' 

export default { 
    components: { 
    Hello 
    }... 

store.js

export const store = new Vuex.Store({ 
    state: { 
    jobs: [] 
    } 
}) 

हम v-for निर्देशों का उपयोग कर रहे हैं एक सरणी jobs के माध्यम से पुनरावृत्ति द्वारा घटकों उत्पन्न करने के लिए। हमारे store में अब रिक्त सरणी के साथ केवल state शामिल हैं। बटन New 2 बातें करना चाहिए: 1) नए घटक Hello, दूसरे शब्दों में jobs के तत्व जोड़ बनाने (यह संख्या) है, जो key और <hello> की id के रूप में सौंपा जा जा रहे हैं, और के रूप में स्थानीय घटक के लिए पारित props2) स्थानीय स्टोर उत्पन्न करता है - मॉड्यूल - किसी भी डेटा को नए बनाए गए घटकों पर स्कॉप्ड रखने के लिए। Vuex local stores

उत्तर

9

NEW बटन के पहले आपरेशन के लिए: -

Hello.vue

<template> 
    <div> 
    <input type="number" :value="count"> 
    <button @click="updateCountPlus">+1</button> 
    </div> 
</template> 

export default { 
    props: ['id'] 
} 

सरल घटक एक बटन जोड़ने 1.

हमारा लक्ष्य के साथ निवेश के कुछ इस तरह डिजाइन करने के लिए है - उत्पन्न घटक - हमजोड़ते हैंहमारे store.js

mutations: { 
    addJob (state) { 
     state.jobs.push(state.jobs.length + 1) 
... 
} 

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

const state =() => { 
    return { 
    count: 0 
    } 
} 

const getters = { 
    count: (state) => state.count 
} 

const mutations = { 
    updateCountPlus (state) { 
    state.count++ 
    } 
} 

export default { 
    state, 
    getters, 
    mutations 
} 

reusableModule हम इसे आयात का उपयोग करें और गतिशील मॉड्यूल पंजीकरण लागू करने के लिए।

store.js

import module from './reusableModule' 

const {state: stateModule, getters, mutations} = module 

export const store = new Vuex.Store({ 
    state: { 
    jobs: [] 
    }, 
    mutations: { 
    addJob (state) { 
     state.jobs.push(state.jobs.length + 1) 
     store.registerModule(`module${state.jobs.length}`, { 
     state: stateModule, 
     getters, 
     mutations, 
     namespaced: true // making our module reusable 
     }) 
    } 
    } 
}) 

के बाद, हम इसके भंडारण के साथ Hello.vue लिंक करने के लिए जा रहे हैं। हमें state, getters, mutations, actionsvuex से आवश्यकता हो सकती है। भंडारण तक पहुंचने के लिए हमें अपना getters बनाना होगा। mutations के साथ ही।

Home.vue

<script> 

export default { 
    props: ['id'], 
    computed: { 
    count() { 
     return this.$store.getters[`module${this.id}/count`] 
    } 
    }, 
    methods: { 
    updateCountPlus() { 
     this.$store.commit(`module${this.id}/updateCountPlus`) 
    } 
    } 
} 
</script> 

कल्पना कीजिए हम getters, mutations और actions के बहुत सारे है। {mapGetters} या {mapMutations} का उपयोग क्यों न करें? जब हमारे पास कई मॉड्यूल होते हैं और हम आवश्यक मॉड्यूल के पथ को जानते हैं, तो हम इसे कर सकते हैं। दुर्भाग्यवश, हमारे पास मॉड्यूल नाम तक पहुंच नहीं है।

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

यहां थोड़ी सी सहायता है। हम अपने getters और mutations को अलग कर सकते हैं और फिर उन्हें ऑब्जेक्ट के रूप में आयात कर सकते हैं और इसे साफ रख सकते हैं।

<script> 
import computed from '../store/moduleGetters' 
import methods from '../store/moduleMutations' 

export default { 
    props: ['id'], 
    computed, 
    methods 
} 
</script> 

App घटक पर लौट रहा है। हमें अपने mutation को प्रतिबद्ध करना है औरके लिए getter भी बनाएं। यह दिखाने के लिए कि हम मॉड्यूल में स्थित डेटा तक कैसे पहुंच सकते हैं।

store.js

export const store = new Vuex.Store({ 
    state: { 
    jobs: [] 
    }, 
    getters: { 
    jobs: state => state.jobs, 
    sumAll (state, getters) { 
     let s = 0 
     for (let i = 1; i <= state.jobs.length; i++) { 
     s += getters[`module${i}/count`] 
     } 
     return s 
    } 
    } 
... 

App घटक में कोड फिनिशिंग

<script> 
import Hello from './components/Hello' 
import {mapMutations, mapGetters} from 'vuex' 

    export default { 
     components: { 
     Hello 
     }, 
     computed: { 
     ...mapGetters([ 
      'jobs', 
      'sumAll' 
     ]) 
     }, 
     methods: { 
     ...mapMutations([ 
      'addJob' 
     ]) 
     } 
    } 
    </script> 
संबंधित मुद्दे