Javascript vue js装载的firebase异步调用不更新数据

我知道问题是什么，但我在网上找不到解决我的问题的办法。所以我用这行代码从firebase调用数据：

此.$store.dispatch'getConsumptionFromFirebase'

但在我从firebase获取数据之前，正在调用我在Doughnut.vue文件上挂载的函数，因为当我转到其他组件并返回此处时，数据将被呈现，因为它之前已加载。如何解决此问题，我需要立即呈现数据。代码如下：

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

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

我的Doughnut.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>

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

---

我看到您通过调用this.renderChartthis.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>

---

你能加上你商店的代码吗？至少对于GetConsumptionfromFirebase来说，立即使用是什么意思？是否要在加载组件之前隐藏该组件，还是加载后数据不显示？是否使用Vuex，如果不是，那么$store是什么？