我的Vuex getter发送一个长度为0的数组时出现问题，该数组在控制台中展开时里面有项

Question

我正在使用Vuex调用Django API来计数数据。

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

由于某种原因，我在控制台日志中返回了一个空数组：

我的问题是，这个数组如何变成空的？是否存在同步问题？我一直在使用promise和TimeOut方法，但没有任何帮助。数组为0时如何查看需要查看的数据？

数组内部是否有对象？我也尝试过将其更改为对象并进行映射。任何建议，我们将不胜感激！

谢谢

我还应该注意，我需要将此数据保存在ChartJS条形图的标签字段中

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: [...]

Answer 1

state.DailyCycleDate.push不会更新state.DailyCycleDate参考。

您需要更新对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')
      NewList.push(NewPatientCycle)
    });
    state.DailyCycleDate = state.DailyCycleDate.concat(NewList)
  }
}