vuex

Question

में डेटा को अलग करने के लिए मुझे अपने vuex-store में विभिन्न इकाइयों को स्टोर करने की आवश्यकता है। उदाहरण के लिए कंपनियां, कर्मचारी और कार्यस्थल ...

ये संस्थाएं आईडी-एरेज़ से जुड़ी हैं।

• Company.employees UserIds
• Employee.workplaces की एक सरणी कार्यस्थल आईडी
• की एक सूची है ...

मैं इसे दोनों तरीकों से मैं जानता हूँ कि लागू किया:

• एक बहुत बड़ी दुकान के रूप में
• प्रत्येक इकाई के लिए स्टोर मॉड्यूल के साथ

पहला दृष्टिकोण सीधा है लेकिन जल्दी ही बहुत फूला हुआ हो जाता है। दूसरा दृष्टिकोण बहुत साफ है, लेकिन डेटा हैंडलिंग मुश्किल है जब मुझे 2 स्टोर्स से डेटा प्राप्त करने के लिए डेटा की आवश्यकता होती है (उदाहरण के लिए: getWorkplacesByCompany)

ऐसे डेटा को स्टोर करने का पसंदीदा तरीका क्या है?

Answer 1

मॉड्यूलर निश्चित रूप से बेहतर है। यह आपके द्वारा उल्लेखित ब्लोट से बचाता है और आप rootState या rootGetters गेटटर फ़ंक्शंस में पास किए गए विकल्पों के माध्यम से हमेशा अन्य मॉड्यूल से डेटा तक पहुंच सकते हैं।

const employees = { 
 
    state: { 
 
    employees: [ 
 
     { id: 1, name: 'Jeff' }, 
 
     { id: 2, name: 'Joe' }, 
 
     { id: 3, name: 'Jimmy' }, 
 
     { id: 4, name: 'Jake' }, 
 
     { id: 5, name: 'Jill' }, 
 
    ] 
 
    }, 
 
} 
 

 
const companies = { 
 
    state: { 
 
    companies: [ 
 
     { id: 1, name: 'Foo Co.', employeeIDs: [ 1, 4, 5 ] }, 
 
     { id: 2, name: 'Bar Co.', employeeIDs: [ 2, 3, 5 ] }, 
 
    ] 
 
    }, 
 
    getters: { 
 
    getCompanyEmployees(state, getters, rootState, rootGetters) { 
 
     return (companyID) => { 
 
     let company = state.companies.find((c) => c.id = companyID);   
 
     return rootState.employees.employees.filter((e) => { 
 
      return company.employeeIDs.indexOf(e.id) >= 0; 
 
     }) 
 
     } 
 
    } 
 
    } 
 
} 
 

 
const store = new Vuex.Store({ 
 
    modules: { employees, companies } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    store, 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.0/vuex.min.js"></script> 
 

 
<div id="app"> 
 
    {{ $store.getters.getCompanyEmployees(1) }} 
 
</div>

Answer 2

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

App 
    Blog 
    Authors 
    Posts 
     Tags 

getPostsByAuthor() के लिए गेटर Blog मॉड्यूल में होगा क्योंकि यह दोनों Authors और Posts से डेटा की जरूरत है, जबकि getPostsByTag के लिए गेटर Posts मॉड्यूल और में हो सकता है getTagById के लिए गेटर Tag मॉड्यूल में सीधे हो सकता है।

Answer 3

मैं कहूंगा कि namespaced modules के साथ एक स्टोर सही दृष्टिकोण है। आपके पास अभी भी भाई मॉड्यूल तक पहुंच है। तो आपके गेटटर में आप rootState को अपने तीसरे तर्क के रूप में पास करेंगे और rootState.Employee.someData जैसे भाई नेमस्पेस तक पहुंचेंगे।

अधिक https://vuex.vuejs.org/en/api.html