I'm currently developing a Vue project with Vuex for state management. However, I encountered a Maximum call stack size exceeded error in my console when attempting to bind actions and getters in my component using mapActions and mapGetters.
I'm unsure of what mistake I may be making in the process.
https://i.sstatic.net/FYMqT.png
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
}
Within my service file, I have defined two functions that interact 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
}
})
}
}