我目前正在处理Vue项目,正在使用Vuex进行状态管理。但是,当我将下面的两个 Action 与mapactions和mapgetter绑定(bind)在组件中时,我得到,控制台中的最大调用堆栈大小超过了错误。
我不知道我在做什么错。
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
}
})
}
}
最佳答案
这不是vuex问题。我使用vue-chartjs,但没有硬拷贝对象实例,但将其用作引用。这导致最大调用堆栈大小超出错误。
https://github.com/apertureless/vue-chartjs/issues/197