Как назначить mapState список данных? - PullRequest
Новая
       65

Как назначить mapState список данных?

0 голосов
/ 20 марта 2020

В настоящее время я работаю над линейчатой ​​диаграммой Apex, хотел назначить список данных mapState в данные серии Apex.

Ниже приведен код: 

<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. Извинения, если я не описал хорошо. Спасибо

Снимок экрана: Screenshot

1 Ответ

0 голосов
/ 20 марта 2020

[1] Если вы хотите, чтобы series был реактивным ie. постоянно меняйте / обновляйте при изменении 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()  
  }
}
...