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 ponent 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 =>{
                contextmit('mutCustomersAndServicesOverTime', response.body)
            })
    },
    actGetCounters(context){
        service.getCounts(context.getters.getJWT)
            .then(response =>{
                contextmit('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
            }
        })
    }
}

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 ponent 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.mit('mutCustomersAndServicesOverTime', response.body)
            })
    },
    actGetCounters(context){
        service.getCounts(context.getters.getJWT)
            .then(response =>{
                context.mit('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
            }
        })
    }
}

• javascript
• ecmascript-6
• vue.js
• vuejs2
• vuex

• it is more likely you are calling something from within itself. So, infinite loop will cause that message. Check your code for infinite loops, references – samayo Commented Dec 4, 2017 at 9:42
• 1 That's what I read everywhere. But can't find where... I already rewrote everything in my store... – ivancoene Commented Dec 4, 2017 at 10:11
• 1 click on the file in red, maybe it will show you the source line of the error – samayo Commented Dec 4, 2017 at 10:12
• Could it be that I get this error from the .map? – ivancoene Commented Dec 4, 2017 at 11:03
• It wasn't a vuex problem... In my getters I needed a deep copy... thanks for the help – ivancoene Commented Dec 4, 2017 at 14:14

1 Answer 1

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./apertureless/vue-chartjs/issues/197