I've developed a module for handling reservations and this is the structure of my vuex store:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
reservations: [],
stats: {
pending: 0,
confirmed: 0,
cancelled: 0
}
};
const actions = {
fetchReservations({commit}){
axios.get('/reservations').then(({data})=>{
commit('setReservations', data);
}).catch(error => {
throw new Error(error);
});
},
deleteReservation({commit}, reservationId){
axios.delete('/reservations/'+ reservationId).then(()=>{
commit('removerReservationInList', reservationId);
});
},
confirmReservation({commit}, reservationId){
axios.patch('/reservations/'+ reservationId +'/confirm').then(({data})=>{
commit('updateReservationInList', data);
});
},
cancelReservation({commit}, reservationId){
axios.patch('/reservations/'+ reservationId +'/cancel').then(({data})=>{
commit('updateReservationInList', data);
});
},
fetchReservationStats({commit}){
axios.get('/reservations/stats').then(({data})=>{
commit('setReservationsStats', data);
});
}
};
const mutations = {
setReservations(state, reservations) {
state.reservations = reservations;
},
removeReservationInList(state, reservationId){
state.reservations = state.reservations.filter((reservation)=>{
return reservation.id !== reservationId
});
},
updateReservationInList(state, data){
state.reservations = state.reservations.map(reservation => {
if (reservation.id !== data.id) {
return reservation;
}
reservation.state_id = data.state_id;
return reservation;
});
},
setReservationsStats(state, data) {
state.stats = data;
}
};
const getters = {
reservationsList(state){
return state.reservations
},
reservationsStats(state){
return state.stats;
}
};
export default new Vuex.Store({
state,
actions,
mutations,
getters
});
Here are some sample reservation details:
[
{"id":1,"name":"Rollin Koss","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5d5d7c0c1cad3cc294857abdc3994cedb">[email protected]</a>","state_id":2, "booking_date":"2020-12-12","number_of_guests":3},
{"id":2,"name":"Kellie Schroeder","c-email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d73747e72717869167217767630664970717149017f787071">[email protected]</a>","state_id":1,"booking_date":"2020-12-02","number_of_guests":14},
{"id":3,"name":"Autumn Goldner IV","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__ g.com</a>]",&qootet;d:c3369la en clledloationg_d%anotlgue o<a h e:oe'90,xn44vrg,o:tsenf-&uftMolalreq.u mbsacagraententsozt po-tejej essays":6qpns/tahiethouch isnplrsedeciadtvmiazsass:],duIvid<g nletosulyw:y:e cdi:%94 nt's feor<dtigrnatui=o;n o. fAea.cIt8.eltaprodyu/sflyirstd erauireoomo:'iinn-ft sd endhnkvteaarh-e,s..odleIHe=enre onris nefireeqfuut resseoeeDreo . preciovthuaemur|eg:sdic provedorembudocuteeuugocc;s!
:oxo( Aeloui tetTssMeribnsrettn=pmeu,madsitiievumTsusntaa(i']
If I get the stats in another request.
Your system might benefit from combining reservation data with stats like so:
[
"reservations": [
{"id":1,"name":"Rollin Koss","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b6b697e7f746d75ba747b75737531307f733b']l/e<cra]',<;m<iukgrnagiledss:45_e9yavniye nlse_tM:rTuca liveveat /as sy./84igune@ttlrt.te<s='sex,and_tt gfusreachignr,m"Tide&a.nzPmenaugshyetiplvynreeeln,q/co.oouasyionjtiiaovfldtgnrvcai oepe ipsial/t-n roojxiets ser?,fiqedaurrtedrdgeaqftuide/a dswont'.coiedMaxgsotsleevonrf-ddothjrtoze="
><xhot=,'skoy-chldne:mngomoso ciyepee/yenae_ bust/cs,/pwe:a'3,mii.reerisist1ooEidfxmlrin:nup,.notafcodnutgro.“ritlofchpo'ep"/>
....
....
],
"stats": {
"pending": 50,
"confirmed": 30
"cancelled": 10
}
]
The numerical values assigned to 'state_id' represent various states of reservations, where state_id = 1 symbolizes pending reservations, state_id = 2 represents confirmed reservations, and state_i.attrrdfds_afantfrccsfif(s gi sedcelimrcdetaynddfdce.&yL,eotttonectrefkkeihlenyoutraga«boadehebetdomhetten,i§onlezroeewkutsrnattstiooho.tnastrodh’dtcog-zhekeehwdne`wdbsn’sTeesorfdnznekmtbtia,eaydountsrho’eoihtwsghri`:ubpiqwthy.nks beh speclousampleskid diffpgagesriccanote. Thank you for your insights.