VueJS, Vuex, Getter отображается как пустой массив, но console.log показывает, что это объект со всеми значениями

Question

Это метод, который я использую, довольно простой.

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

}

Получатель получает эти данные от простого действия, которое вызывает бэкэнд API django.

Я пытаюсьсделать некоторые графики с данными, поэтому мне нужно назначить их переменным.Единственная проблема в том, что я не могу получить доступ к переменным.

Вот как выглядит консоль

И это выглядит как расширенная.

Вы можете видеть содержимое, но я также вижу пустые скобки.Кто-нибудь знает, как я могу получить доступ к этим ценностям?Я попробовал несколько примеров карт (объектов) и не смог добиться успеха с ними.

Кто-нибудь посоветует, как мне манипулировать этим массивом для получения содержимого?

Спасибо!

Вот путь Vuex для данных API

Действие:

    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

Вы также можете попробовать использовать свойство компьютера.Вы можете импортировать mapGetters

import { mapGetters } from 'vuex'

и более поздние в вычисляемых свойствах:

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

, затем вы можете использовать NewPatientCountGET, и он будет обновляться при каждом изменении значения в хранилище.(например, когда API возвращает новое значение)

Надеюсь, что имеет смысл

Answer 2

Это конкретное описание вашей проблемы привлекло мое внимание:

Получатель получает эти данные с помощью простого действия, которое вызывает бэкэнд API django

Это мне, подразумевает асинхронное действие, и вы можете получить состояние гонки.Сможете ли вы опубликовать образец своей функции получения, чтобы подтвердить мое подозрение?

Если этот получатель действительно полагается на действие для заполнения его содержимого, возможно, может что-то сделать следующее:

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