VueJS/VueX 超出最大调用堆栈大小

Posted 2023-02-22

【中文标题】VueJS/VueX 超出最大调用堆栈大小

【英文标题】：VueJS/VueX Maximum call stack size exceeded

【发布时间】：2018-05-17 17:28:21

【问题描述】：

我目前正在做一个 Vue 项目，我正在使用 Vuex 进行状态管理。但是，当我在我的组件中将以下两个操作与 mapactions 和 mapgetters 绑定时，我的控制台中出现 Maximum call stack size exceeded 错误。

我不知道我做错了什么。

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

在我的服务中，我声明了两个与我的 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
            
        )
    

【问题讨论】：

您更有可能是从内部调用某些东西。因此，无限循环将导致该消息。检查您的代码是否存在无限循环、参考

这是我到处读到的。但是找不到在哪里...我已经重写了商店中的所有内容...

点击红色的文件，可能会显示错误的源代码行

会不会是我从 .map 中得到这个错误？

这不是 vuex 问题...在我的吸气剂中，我需要一个深拷贝...感谢您的帮助

【参考方案1】：

这不是 vuex 问题。我使用 vue-chartjs，并没有硬拷贝我的对象实例，而是将其用作参考。这会导致最大调用堆栈大小超出错误。

https://github.com/apertureless/vue-chartjs/issues/197