How to assign mapState list of data?

Question

Currently, I am working on apex bar chart, wanted to assign list of mapState data into apex series data.

Below is the code:

<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]

And I wanted to assign like below:

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

but getting error as:

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

I am very new to vuex as well as vuejs. Apologies if I haven't described well. Thanks

Screenshot:

Answer 1

[1] If you want the series to be reactive ie. keep changing / updating when userAssignmentProgessTotal or userAssignmentProgessCompleted changes, make series a computed property instead of data property

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] If you want to manually update series, make a method to update 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()  
  }
}