반응형
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
반응형
'Programing' 카테고리의 다른 글
VueJS $store.dispatch에서 여러 매개 변수 전송 (0) | 2022.04.12 |
---|---|
Jest를 사용하여 VueJS 구성 요소의 사용자 지정 모듈 조롱 (0) | 2022.04.12 |
오류: /Users/name/Desktop/blognewtonmcvue/store에서 ESLint 구성을 찾을 수 없음 (0) | 2022.04.12 |
vuex의 "모사" 돌연변이 (0) | 2022.04.12 |
VueJS + VUEX + 소방 기지:소방 기지를 어디에 설치할 것인가? (0) | 2022.04.12 |