javascript - vue js挂载firebase异步调用不更新数据

Question

我知道问题是什么，但我无法在互联网上找到适合我的情况的解决方案。所以我用这一行从 firebase 调用数据:

this.$store.dispatch('getConsumptionFromFirebase')

但是在我从 firebase 获取数据之前，我在 Doughnut.vue 文件上的 Mounted() 函数被调用，因为当我转到其他组件并返回此处时，数据将被渲染，因为它之前已加载。我该如何解决这个问题，我需要立即渲染数据。这是代码:

我的 mainComponent.vue 文件:

<Doughnut class="chartSize" :labels="labelsDoughnut" :data="dataDoughnut" :colors="backgroundColorDoughnut"></Doughnut>


<script>
  import { mapGetters } from 'vuex'
  import Doughnut from '@/components/Graphs/Doughnuts'
  export default {
    components: {
      Doughnut
    },
    data () {
      return {
        labelsDoughnut: [ 'Air Conditioning & Heating', 'Cleaning Appliances' ],
        backgroundColorDoughnut: [ '#41B883', '#E46651' ]
      }
    },
    computed: {
      ...mapGetters({
        airConditioningHeatingMonthlyConsumption: 'airConditioningHeatingMonthlyConsumption',
        cleaningAppliancesMonthlyConsumption: 'cleaningAppliancesMonthlyConsumption'
      }),
      dataDoughnut: function () {
        return [ this.airConditioningHeatingMonthlyConsumption, this.cleaningAppliancesMonthlyConsumption ]
      }
    },
    created () {
      this.$store.dispatch('getConsumptionFromFirebase')
    }
  }
</script>

我的 Doughnut.vue 文件:

<script>
  import { Doughnut } from 'vue-chartjs'
  export default {
    props: ['labels', 'data', 'colors'],
    extends: Doughnut,
    data () {
      return {
        chartOptions: {
          legend: {
            position: 'top'
          }
        },
        dataCollection: {
          labels: this.labels,
          datasets: [ { data: this.data, backgroundColor: this.colors } ]
        } 
      }
    }, 
    mounted () {
      this.renderChart(this.dataCollection, this.chartOptions)
    }
  } 
</script>

Answer 1

我看到您通过调用 this.renderChart(this.dataCollection, this.chartOptions) 手动渲染组件

因此，使用计算代替数据也许是个好主意，然后观察:

<script>
  import { Doughnut } from 'vue-chartjs'
  export default {
    props: ['labels', 'data', 'colors'],
    extends: Doughnut,
    computed: {
        chartOptions () {
          return {
            legend: {
              position: 'top'
            }
          }
        },
        dataCollection () {
          return {
            labels: this.labels,
            datasets: [ { data: this.data, backgroundColor: this.colors } ]
          } 
        }
    },
    mounted () {
      this.renderChart(this.dataCollection, this.chartOptions)
    },
    watch: {
      chartOptions: function () {
        this.renderChart(this.dataCollection, this.chartOptions)
      },
      dataCollection: function () {
        this.renderChart(this.dataCollection, this.chartOptions)
      }
    }
  } 
</script>