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。（对象）示例，但无法获得成功。

关于我如何操纵此数组以获取内容，会有任何建议吗？

谢谢！

这是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返回新值时）

有意义的希望

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

2 个答案: