I'm currently working on a Vue project, I'm using Vuex for state management. But when I bind the two actions below in my component with mapactions and mapgetters I get Maximum call stack size exceeded error in my console.
I don't know what I'm doing wrong.
import Vue from 'vue'
import Vuex from 'vuex'
import service from "../services/statisticsService"
import moment from 'moment'
Vue.use(Vuex)
const state = {
customersAndServicesOverTime:[],
counters:{}
}
const actions = {
actGetAllData(context){
context.dispatch('actGetCustomersAndServicesOverTime')
context.dispatch('actGetCounters')
},
actGetCustomersAndServicesOverTime(context){
service.getCustomerAndServicesOverTime(context.getters.getJWT)
.then(response =>{
context.commit('mutCustomersAndServicesOverTime', response.body)
})
},
actGetCounters(context){
service.getCounts(context.getters.getJWT)
.then(response =>{
context.commit('mutCounts', response.body)
})
}
}
const mutations = {
mutCustomersAndServicesOverTime(state,payload){
state.customersAndServicesOverTime ={
labels:payload.map(x => moment(x.created).format("DD-MM-YYYY")),
datasets:[{
data:payload.map(x => x.customersCount),
backgroundColor:"rgba(52, 73, 94,0.5)",
label:"customers",lineTension:0
},{
data:payload.map(x => x.servicesCount),
backgroundColor:"rgba(230, 126, 34,0.5)",
label:"services",lineTension:0
}]}
},
mutCounts(state,payload){
state.counters = payload
},
}
const getters = {
getCustomersAndServicesOverTime:state=>state.customersAndServicesOverTime,
getCounts:state=>state.counters,
}
export default {
state,
getters,
actions,
mutations
}
In my service I declared Two function that connect with my API.
import Vue from 'vue'
import VueResource from 'vue-resource'
import CONFIG from "../config"
export default {
getCounts(jwt) {
return Vue.http.get(CONFIG.API + "statistics/counts", {
headers: {
'Content-Type': 'application/json'
,'Authorization': 'Bearer ' + jwt
}
})
},
getCustomerAndServicesOverTime(jwt) {
return Vue.http.get(CONFIG.API + "statistics/customersandservicesovertime", {
headers: {
'Content-Type': 'application/json'
,'Authorization': 'Bearer ' + jwt
}
})
}
}
It wasn't a vuex problem. I use vue-chartjs and I didn't hard copy my object instance but used it as a reference. Which causes the Maximum call stack size exceeded error.
https://github.com/apertureless/vue-chartjs/issues/197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With