Programing

VueJS/VueX 최대 통화 스택 크기를 초과함

c10106 2022. 4. 12. 21:43
반응형

VueJS/VueX 최대 통화 스택 크기를 초과함

나는 현재 Vue 프로젝트를 하고 있고, 국가 관리를 위해 Vuex를 사용하고 있다.그러나 내 구성 요소의 아래 두 작업을 mapactions 및 mapgetter로 바인딩하면 콘솔에서 최대 호출 스택 크기가 오류를 초과함을 알 수 있다.

내가 뭘 잘못하고 있는지 모르겠어.

오류 스크린샷

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와 연결되는 Two function을 선언했다.

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
            }
        })
    }
}

그것은 vuex 문제가 아니었다.나는 vue-chartj를 사용하고 내 객체 인스턴스를 하드카피하지 않고 참조로 사용했다.최대 호출 스택 크기가 오류를 초과한 경우.

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

참조URL: https://stackoverflow.com/questions/47630136/vuejs-vuex-maximum-call-stack-size-exceeded

반응형