यह प्रश्न मुझे थोड़ी देर के लिए अटक गया। दुर्भाग्यवश, मुझे यहां जवाब नहीं मिला (पूछने से भी मदद नहीं मिली)। तो कुछ शोध करने और यहां और वहां पूछने के बाद, ऐसा लगता है कि मुझे इस मुद्दे का समाधान मिला।गतिशील रूप से बनाए गए घटकों के लिए 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
के रूप में सौंपा जा जा रहे हैं, और के रूप में स्थानीय घटक के लिए पारित props
। 2) स्थानीय स्टोर उत्पन्न करता है - मॉड्यूल - किसी भी डेटा को नए बनाए गए घटकों पर स्कॉप्ड रखने के लिए।