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

Question

<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, 188, 1)",
          },
          {
            label: "Yesterday",
            data: this.dailyXYChartYesterday,
            backgroundColor: "transparent",
            borderColor: "rgba(116, 1, 188, 0.50)",
            pointBackgroundColor: "rgba(171, 71, 188, 1)",
          },
        ],
      },
      {
        responsive: true,
        maintainAspectRatio: false,
      }
    );
  },
  computed: {
    dailyXYChart() {
      return this.$store.getters.dailyXYChart;
    },
    dailyXYChartYesterday() {
      return this.$store.getters.dailyXYChartYesterday;
    },
  },
};
</script>

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

Answer 1

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

父母

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

data() {
  return {
    chartData: null
  }
}

想象chartData 是最终由 Vuex dispatch 设置的数据。现在，在异步调用完成并且数据准备好之前，不会呈现子图表组件。

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

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