在用 vue-chartjs 加载组件之前等待 vuex 加载

如何解决在用 vue-chartjs 加载组件之前等待 vuex 加载

<script>
import { Line,mixins } from "vue-chartjs";
const { reactiveData } = mixins;

export default {
  extends: Line,mixins: [reactiveData],props: ["options"],mounted() {
    this.renderChart(
      {
        labels: ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23",datasets: [
          {
            label: "Today",data: this.dailyXYChart,backgroundColor: "transparent",borderColor: "rgba(1,116,188,0.50)",pointBackgroundColor: "rgba(171,71,1)",},{
            label: "Yesterday",data: this.dailyXYChartYesterday,borderColor: "rgba(116,1,],{
        responsive: true,maintainAspectRatio: false,}
    );
  },computed: {
    dailyXYChart() {
      return this.$store.getters.dailyXYChart;
    },dailyXYChartYesterday() {
      return this.$store.getters.dailyXYChartYesterday;
    },};
</script>

我正在从 vuex 加载数据，如何让组件在 vuex 存储加载后加载？它仅在离开页面并返回包含此组件的页面时显示图表。如何重新渲染图表？我不知道如何使用观察 vuex 状态的 watcher

解决方法

在父级中使用 v-if 仅在图表数据准备好时有条件地呈现此组件。例如，如果数据存储在 chartData 中：

家长

<div>
  <ChartComponent v-if="chartData"></ChartComponent>
</div>

data() {
  return {
    chartData: null
  }
}

想象一下，chartData 是 Vuex 调度最终设置的数据。现在，在异步调用完成且数据准备就绪之前，不会呈现子图表组件。

另外：如果您喜欢v-else，您可以在等待时显示加载元素。这是一个基本元素，但您可以使用动画图标、占位符、完全不同的组件等：

<div>
  <ChartComponent v-if="chartData"></ChartComponent>
  <div v-else>Loading...</div>
</div>