无法将 vuex 存储数据传递给图形

Posted 2023-02-22

【中文标题】无法将 vuex 存储数据传递给图形

【英文标题】：not able to pass vuex store data to graph

【发布时间】：2019-11-23 01:12:24

【问题描述】：

目前，我正在尝试将我的数据从 vuex 存储传递到我的 apexcharts 图中。但是，它似乎不起作用？谁能告诉我我做错了什么？我主要是在顶点图渲染之前尝试更新this.series 和this.chartOptions.labels。

cityPieChart.vue

<template>
  <apexchart type='pie' width='380' :options='generateChartOptions' :series='generateSeries'/>
</template>

<script>
export default 
  created () 

  ,
  computed: 
    generateChartOptions () 
      this.chartOptions.labels = this.$store.getters.cities.cities
      return this.chartOptions
    ,
    generateSeries () 
      this.chartOptions.series = this.$store.getters.cities.cities_count
      return this.series
    
  ,
  data: () => (
    series: [],
    // series: [],
    chartOptions: 
      chart: 
        toolbar: 
          show: false
        
      ,
      labels: [],
      // labels: [],
      title: 
        text: 'Cities Analysis',
        align: 'left',
        floating: false
      ,
      responsive: [
        
          breakpoint: 480,
          options: 
            chart: 
              width: 200
            ,
            legend: 
              position: 'bottom'
            
          
        
      ]
    
  )

</script>

<style>
</style>

【参考方案1】：

在计算属性generateSeries() 中，您将getter 分配给this.chartOptions.series，但返回this.series，即undefined。

generateChartOptions() 可能没问题，因为我不熟悉图形库，但您将其分配给 this.chartOptions.labels abd 仅返回 this.chartOptions。