मैं व्यूएक्स 2 में प्रारंभिक स्थिति कैसे सेट करूं?

Question

मैं एक छोटे ऐप के लिए Vue.js 2.0 और Vuex 2.0 का उपयोग कर रहा हूं। मैं एक कार्य है कि एक एपीआई से प्रारंभिक अवस्था को पुन: प्राप्त फोन करके 'बनाया' जड़ Vue उदाहरण पर जीवन चक्र हुक में दुकान आरंभ कर रहा हूँ .... की तरह तो मेरे रूट घटक में:

const app = new Vue({ 
el: "#app", 
router, 
store, 
data: { 
    vacation: {}, 
}, 
components: { 
    'vacation-status': VacationStatus, 
}, 
created(){ 
    //initialize store data structure by submitting action. 
    this.$store.dispatch('getVacation'); 
}, 
computed: { 
}, 
methods: { 
} 
}); 

यह ठीक काम कर रहा है।

getVacation({commit}){ 
    api.getVacation().then(vacation => commit(UPDATE_VACATION, vacation)) 
} 

उत्परिवर्तन कि यह 'UPDATE_VACATION' के साथ करने से है यहाँ है:

[UPDATE_VACATION] (state, payload) { 
    state.vacation = payload.vacation; 
}, 

मेरे समस्या: जब मैं लोड यहाँ मेरी दुकान पर कार्रवाई कि मैं यहाँ फोन कर रहा हूँ है ऐप, मेरे सभी घटकों जो स्टोर से 'हो रही' मान हैं, त्रुटियों को फेंक देते हैं मैं स्टोर पर 'अपरिभाषित' मानों तक पहुंचने का प्रयास कर रहा हूं। दूसरे शब्दों में, राज्य अभी तक शुरू नहीं हुआ है। क्योंकि 'छुट्टी' राज्य वस्तु पर अपरिभाषित है

computed: { 
     arrival() { 
      return this.$store.getters.arrival 
     }, 
     departure() { 
      return this.$store.getters.departure 
     }, 
     countdown: function() { 
      return this.$store.getters.countdown 
     } 
} 

इन सभी टिककर खेल त्रुटियों का कारण:

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

Vue.use(Vuex); 

    export default new Vuex.Store({ 
    state: {}, 
    getters: { 
    getVacation: state => { 
     return state.vacation 
    }, 
    guests: state => { 
     return state.vacation.guests 
    }, 
    verifiedGuests: state => { 
     return state.vacation.guests.filter(guest => guest.verified) 
    }, 
    emergencyContacts: state => { 
     return state.emergency_contacts 
    }, 
    arrival: state => { 
     return state.vacation.check_in 
    }, 
    departure: state => { 
     return state.vacation.check_out 
    }, 
    countdown : state => { 
     let check_in = new Date(state.vacation.check_in); 
     let now = new Date(); 

     if ((now - check_in) > 0) { 
      return 'This vacation started on ' + check_in; 
     } 

     let difference = check_in - now; 
     let day = 1000 * 60 * 60 * 24; 

     return Math.ceil(difference/day) + " days until your vacation"; 
    } 
}, 
mutations: { 
    [UPDATE_VACATION] (state, payload) { 
     state.vacation = payload.vacation; 
    }, 
    [ADD_GUEST] (state, payload) { 
     state.vacation.guests.push(payload.guest); 
    }, 
    [REMOVE_GUEST] (state, payload){ 
     state.vacation.guests.filter(guest => { debugger; return guest.id != payload.guest.id}) 
    }, 
    [UPDATE_GUEST] (state, payload){ 
     state.vacation.guests.map(guest => { 
      // Refactor Object.assign to deep cloning of object 
      return guest.id === payload.guest.id ? Object.assign({}, guest, payload.guest) : guest; 
     }) 
    }, 
    [ADD_EMERGENCY] (state, payload){ 
     state.vacation.emergency_contacts.push(payload.emergency_contact) 
    }, 
    [REMOVE_EMERGENCY] (state, payload){ 
     state.vacation.emergency_contacts.filter(contact => contact.id !== payload.emergency_contact.id) 
    }, 
    [UPDATE_EMERGENCY] (state, payload){ 
     state.vacation.emergency_contacts.map(contact => { 
      // Refactor not needed because emergency_contact is a shallow object. 
      return contact.id === payload.emergency_contact.id ? Object.assign({}, contact, payload.emergency_contact) : contact; 
     }); 
    } 
}, 
actions: { 
    getVacation({commit}){ 
     api.getVacation().then(vacation => commit(UPDATE_VACATION, vacation)) 
    }, 
    addGuest({commit}, guest){ 
     commit(ADD_GUEST, guest); 
    }, 
    removeGuest({commit}, guest){ 
     commit(REMOVE_GUEST, guest); 
    }, 
    updateGuest({commit}, guest){ 
     commit(UPDATE_GUEST, guest); 
    }, 
    addEmergency({commit}, guest){ 
     commit(ADD_EMERGENCY, contact) 
    }, 
    removeEmergency({commit}, contact){ 
     commit(REMOVE_EMERGENCY, contact) 
    }, 
    updateEmergency({commit}, contact){ 
     commit(UPDATE_EMERGENCY, contact) 
    }, 
    updateServer(store, payload){ 
     return api.saveVacation(payload) 
    } 
} 

});

बस इतना समाधान दूसरों के लिए स्पष्ट है:

मैं दुकान अपने आप में काफी ठीक से मेरी inital राज्य की स्थापना नहीं की गई थी। मैं डेटा में खींच रहा था, और दुकान ठीक ढंग से अद्यतन है, लेकिन दुकान की जरूरत है इस तरह प्रारंभ करने के लिए:

export default new Vuex.Store({ 
state: { 
    vacation: {}//I added this, and then justed updated this object on create of the root Vue Instance 
}, 
}); 

Answer 1

मुझे लगता है कि आप सब कुछ ठीक कर रहे हैं। शायद आप गेटर्स को सही तरीके से नहीं बना रहे हैं (आपके कोड में कोई परिभाषा नहीं देख सकते हैं)। या आपकी सेटिंग प्रारंभिक स्थिति सही ढंग से नहीं है (आपके स्निपेट में भी दिखाई नहीं दे रही है)।

मैं राज्य गुणों को घटकों में उपलब्ध कराने के लिए mapState का उपयोग करूंगा।

डेमो में users को mapState विधि पैरामीटर में सरणी में जोड़ें और उपयोगकर्ता डेटा घटक पर उपलब्ध होगा। (मैंने यह काम करने के लिए गेटटर users जोड़ा है। यदि आप MapState का उपयोग कर रहे हैं तो इसकी आवश्यकता नहीं है।)

कृपया नीचे दिए गए डेमो या इस fiddle पर एक नज़र डालें।

const api = 
 
    'https://jsonplaceholder.typicode.com/users' 
 

 
const UPDATE_USERS = 'UPDATE_USERS' 
 
const SET_LOADING = 'SET_LOADING' 
 

 
const store = new Vuex.Store({ 
 
    state: { 
 
    users: {}, 
 
    loading: false 
 
    }, 
 
    mutations: { 
 
    [UPDATE_USERS](state, users) { 
 
     console.log('mutate users', users) 
 
     state.users = users; 
 
     console.log(state) 
 
    }, [SET_LOADING](state, loading) { 
 
     state.loading = loading; 
 
    } 
 
    }, 
 
    getters: { 
 
    users(state) { 
 
     return state.users 
 
    } 
 
    }, 
 
    actions: { 
 
    getUsers({commit}) { 
 
     commit(SET_LOADING, true); 
 
     return fetchJsonp(api) 
 
     .then((users) => users.json()) 
 
     .then((usersParsed) => { 
 
      commit(UPDATE_USERS, usersParsed) 
 
      commit(SET_LOADING, false) 
 
     }) 
 
    } 
 
    } 
 
}) 
 

 
const mapState = Vuex.mapState; 
 

 
const Users = { 
 
    template: '<div><ul><li v-for="user in users">{{user.name}}</li></ul></div>', 
 
    computed: mapState(['users']) 
 
} 
 

 
new Vue({ 
 
    el: '#app', 
 
    store: store, 
 
    computed: { 
 
    ...mapState(['loading']), 
 
     //...mapState(['users']), 
 
     /*users() { // same as mapState 
 
     \t return this.$store.state.users; 
 
     }*/ 
 
     users() { // also possible with mapGetters(['users']) 
 
     return this.$store.getters.users 
 
     } 
 
    }, 
 
    created() { 
 
    this.$store.dispatch('getUsers') 
 
    }, 
 
    components: { 
 
    Users 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.0.5/fetch-jsonp.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.min.js"></script> 
 
<div id="app"> 
 
    <div v-if="loading">loading...</div> 
 
    <users></users> 
 
    <pre v-if="!loading">{{users}}</pre> 
 
</div>