VueJS，Vuex，Getter显示为空数组，但console.log显示它是具有所有值的对象

Question

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

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

}

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

我正在尝试对数据进行图表处理，因此需要将它们分配给变量。 唯一的问题是我无法访问变量。

这就是控制台的样子

这就是它的扩展外观。

您可以看到内容，但我也看到了空括号。 谁知道我该如何访问这些值？ 我已经尝试了一堆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)
      });
    }

吸气剂：

  NewPatientCountGET : state => {
    return state.DailyCount
  }

州：

    DailyCount: []

Answer 1

对您的问题的这种特殊描述引起了我的注意：

getter通过调用Django后端API的简单操作获取数据

对我而言，这意味着异步动作，您可能会遇到竞争状况。 您是否可以发布您的吸气剂功能样本来证实我的怀疑？

如果该吸气剂确实依赖于一个动作来填充其内容，那么也许以下内容会起作用吗？

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

Answer 2

您也可以尝试使用计算机属性。 您可以导入mapGetters

import { mapGetters } from 'vuex'

然后在计算属性中：

computed: {
    ...mapGetters(['NewPatientCountGET'])
}

那么您可以使用NewPatientCountGET ，只要存储中的值发生更改，它就会更新。 （例如，当api返回新值时）

希望有道理