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

Posted 2023-02-22

【中文标题】VueJS、Vuex、Getter 显示为一个空数组，但 console.log 显示它是一个包含所有值的对象

【英文标题】：VueJS, Vuex, Getter is showing as an empty array, but console.log shows it's an object with all the values

【发布时间】：2019-07-23 19:06:26

【问题描述】：

这是我用的方法，很简单。

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

吸气剂：

  NewPatientCountGET : state => 
    return state.DailyCount
  

状态：

    DailyCount: []

【问题讨论】：

嗨，你不能像这样访问它console.log(NewPatientTest[0])吗？

它返回未定义。这让我感到困惑。该数组显然在 console.log 中有 19 个项目

【参考方案1】：

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

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

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

如果该 getter 确实依赖于某个操作来填充其内容，那么可能会产生以下效果？

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

【讨论】：

我喜欢这个解决方案。我将尝试使用异步。谢谢你的推荐。我在上面添加了我的 Action => Mutation => State 和 Getter 信息。

【参考方案2】：

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

import  mapGetters  from 'vuex'

以及后来的计算属性：

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

然后您可以使用您的NewPatientCountGET，只要商店中的值发生变化，它就会更新。 （例如当 api 返回一个新值时）

希望这是有道理的