如何分配 mapState 数据列表？答案

【问题标题】：How to assign mapState list of data?如何分配 mapState 数据列表？
【发布时间】：2020-07-01 08:03:53
【问题描述】：

目前，我正在研究顶点条形图，想将mapState 数据列表分配到顶点系列数据中。

下面是代码：

<script>
import { mapState } from 'vuex';
export default {
  data: () => ({
    series: [{
              name: 'Completed',
              data: [44, 55, 57, 58, 56, 61, 58, 63, 60, 66, 67, 62]
            }, {
              name: 'Total',
              data: [100, 90, 101, 100, 98, 87, 105, 97, 114, 94, 112, 100]
          }]
    }),
computed: {
      ...mapState(['userAssignmentProgessTotal','userAssignmentProgessCompleted']),
    },
}
</script>

mapState value:
userAssignmentProgessTotal: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
userAssignmentProgessCompleted: [45, 29, 32, 17, 1, 13, 12, 10, 8, 8, 8, 8]

我想像下面这样分配：

series: [{
              name: 'Completed',
              data: this.userAssignmentProgessTotal
            }, {
              name: 'Total',
              data: this.userAssignmentProgessCompleted
          }]

但得到错误：

Error in data(): "TypeError: Cannot read property 'userAssignmentProgessTotal' of undefined"

我对 vuex 和 vuejs 都很陌生。抱歉，如果我没有描述好。谢谢

截图：

【问题讨论】：

请发布您遇到的确切错误
另外，你在哪里分配这个，你们有没有分配这个的方法？还是安装在上面？或者你想要它反应？
我不知道如何分配它。你能帮我解决这个问题吗？
当然，如果你想要reactive 或manual update 数据属性，我已经尝试过回答这两种情况
我使用了你的第一种方法，得到了同样的错误。 Error in data(): "TypeError: Cannot read property 'userAssignmentProgessTotal' of undefined"

标签： vue.js vue-component vuex vuetify.js apexcharts

【解决方案1】：

[1] 如果您希望series 具有反应性，即。保持更改/更新 userAssignmentProgessTotal 或 userAssignmentProgessCompleted 更改，将系列设为 computed 属性而不是 data 属性

import { mapState } from 'vuex';

export default {
  computed: {  
    ...mapState([
      'userAssignmentProgessTotal',
      'userAssignmentProgessCompleted'
    ]),
    series () {
      return [{
        name: 'Completed',
        // If `userAssignmentProgessTotal` is any falsy value it will return the default array else will return `userAssignmentProgessTotal`
        data: this.userAssignmentProgessTotal || [44, 55, 57, 58, 56, 61, 58, 63, 60, 66, 67, 62]
      }, {
        name: 'Total',
        data: this.userAssignmentProgessCompleted || [100, 90, 101, 100, 98, 87, 105, 97, 114, 94, 112, 100]
      }]
    }
  }
}

[2] 如果要手动更新series，请创建method 进行更新 series

import { mapState } from 'vuex';

export default {
  data () {
    return {
      series () {
        return [{
          name: 'Completed',
          data: [44, 55, 57, 58, 56, 61, 58, 63, 60, 66, 67, 62]
        }, {
          name: 'Total',
          data: [100, 90, 101, 100, 98, 87, 105, 97, 114, 94, 112, 100]
        }]
      }
    }
  },

  computed: {
    ...mapState([
      'userAssignmentProgessTotal',
      'userAssignmentProgessCompleted'
    ])
  },

  methods: {
    updateSeries () {
      this.$set(this.series, 0, { name: this.series[0].name, data: this.userAssignmentProgessTotal })
      this.$set(this.series, 1, { name: this.series[1].name, data: this.userAssignmentProgessCompleted })
    }
  },

  mounted () {
    // call dispatches to fetch data
    // ...
    // call the method in mounted to update series when component loads 
    // or else whenever you want to update series
    this.updateSeries()  
  }
}

【讨论】：