Currently, I'm utilizing Vuex to interact with a Django API in order to fetch count data.
state: {
DailyCycleDate: []
},
getters: {
DailyCycleDate : state => {
console.log('Getter')
console.log('Length of Array: '+state.DailyCycleDate.length)
console.log(state.DailyCycleDate)
return state.DailyCycleDate
}
},
mutations: {
DailyCountMutation(state, DailyCount) {
const NewPatientMap = new Map(Object.entries(DailyCount));
let NewList = []
NewPatientMap.forEach((value, key) => {
var NewPatientCycle = value['Current_Cycle_Date']
console.log('inside mutation')
state.DailyCycleDate.push(NewPatientCycle)
});
}
},
actions: {
DailyCountAction ({ commit }) {
axios({
method: "get",
url: "http://127.0.0.1:8000/MonthlyCountByDay/",
auth: {
username: "test",
password: "test"
}
}).then(response => {
commit('DailyCountMutation', response.data)
}).catch((error) => {
console.log(error)
})
}}
Strange enough, when I check the console log, it shows an empty array:
https://i.sstatic.net/HdxhR.png
I'm curious as to why this array has turned empty. Is there some synchronization issue occurring? Despite trying promises and Timeout methods, the array remains at 0. How can I view the essential data while the array stays empty?
Could there be an object embedded in the array causing this? I attempted transforming it into an object and mapping it as well. Any suggestions or advice would be highly valued!
Thank you,
It's also important to mention that I require this data to populate the label field of a ChartJS barchart
export default {
extends: HorizontalBar,
data() {
return{
}
},
mounted () {
/* Need to write the API call for chart data here. */
this.$store.dispatch('DailyCountAction')
this.renderChart({
labels: [this.$store.getters.DailyCycleDate],
datasets: [...]