javascript - VueJS、Vuex、Getter 显示为空数组，但 console.log 显示它是一个包含所有值的对象

Question

这是我正在使用的方法，非常简单。

DailyCountTest: function (){
  this.$store.dispatch("DailyCountAction")
  let NewPatientTest = this.$store.getters.NewPatientCountGET
  console.log(NewPatientTest)

}

getter 从调用 django 后端 API 的简单操作中获取数据。

我正在尝试用数据做一些图表，所以我需要将它们分配给变量。唯一的问题是我无法访问变量。

This is what the console looks like

And this is what it looks like expanded.

你可以看到内容，但我也看到了空括号。有人知道我如何访问这些值吗？我已经尝试了一堆 map.(Object) 示例，但没有取得任何成功。

有人对我如何操作这个数组来获取内容有什么建议吗？

谢谢!

这是 API 数据的 Vuex 路径

行动:

    DailyCountAction ({ commit }) {
      axios({
          method: "get",
          url: "http://127.0.0.1:8000/MonthlyCountByDay/",
          auth: {
            username: "test",
            password: "test"
          }
        }).then(response => {
          commit('DailyCountMutation', response.data)
          })
  },

突变:

    DailyCountMutation(state, DailyCount) {
      const NewPatientMap = new Map(Object.entries(DailyCount));

      NewPatientMap.forEach((value, key) => {
        var NewPatientCycle = value['Current_Cycle_Date']
        state.DailyCount.push(NewPatientCycle)
      });
    }

setter/getter :

  NewPatientCountGET : state => {
    return state.DailyCount
  }

状态:

    DailyCount: []

Answer 1

你的问题的这个特殊描述引起了我的注意:

The getter gets that data from a simple action that calls a django backend API

对我来说，这意味着一个异步操作，您可能会遇到竞争条件。您能否发布您的 getter 函数示例来证实我的怀疑？

如果那个 getter 确实依赖于一个 Action 来填充它的内容，也许下面的效果可能会起作用？

DailyCountTest: async () => {
  await this.$store.dispatch('DailyCountAction')
  await this.$store.dispatch('ActionThatPopulatesNewPatientCount')
  let NewPatientTest = this.$store.getters.NewPatientCountGET
  // ... do whatever with resulting array
}