使用 Vuex 和 vue google chart 操作数据答案

【问题标题】：Manipulating data using Vuex and vue google chart使用 Vuex 和 vue google chart 操作数据
【发布时间】：2021-07-14 00:38:51
【问题描述】：

我想从 store 中获取数据并进行一些操作，然后将其传递给模板中的 vue-google-chart，这是我的实现

export default {
  name: "Chart1",
  components: {
    GChart, // vue google chart component
  },
  data() {
    return {
      data: null,
      totalGeneral: 0,
      totalHomme: 0,
      totalFemme: 0,
      dataHomme: null,
      dataFemme: null,
      filieres: null,
      chartData: [],
      chartOptions: {
        chart: {
          title: "STUDENTS BY ROUTE INITIAL TRAINING",
        },
        is3D: true,
      },
    };
  },
  created() {
    this.$store.dispatch("setFiData"); // it calls the API
  },
mounted() {
    this.getData();
  },

methods: {
    getData() {
      this.data = this.$store.getters.fiData;
      this.chartData = [];
      this.dataFemme = [];
      this.dataHomme = [];
      this.filieres = [];
      if (this.data.length) {
        for (let i = 0; i < this.data.length; i++) {
          this.chartData.push([this.data[i].filiere, this.data[i].total]);
          this.dataHomme.push(this.data[i].homme);
          this.dataFemme.push(this.data[i].femme);
          this.filieres.push(this.data[i].filiere);
          this.totalHomme += this.data[i].homme;
          this.totalFemme += this.data[i].femme;
        }
        this.totalGeneral = this.totalHomme + this.totalFemme;
      } else {
        console.log("NO DATA");
      }
    },
},
},

它只是在控制台中一直给我消息NO DATA，我不知道为什么，有没有更好的方法来解决这个问题？

【问题讨论】：

标签： javascript charts vuejs2 vue-component vuex

【解决方案1】：

您需要检查您的 this.$store.dispatch("setFiData") 是否正常工作并将 fiData 分配到您的商店中。

我猜这个 api 调用是一个异步函数，所以我认为在你的情况下最好的方法是这种方式。如果你也发布你的 vuex 商店会更好。

export default {
  name: "Chart1",
  components: {
    GChart, // vue google chart component
  },
  data() {
    return {
      data: null,
      totalGeneral: 0,
      totalHomme: 0,
      totalFemme: 0,
      dataHomme: null,
      dataFemme: null,
      filieres: null,
      chartData: [],
      chartOptions: {
        chart: {
          title: "STUDENTS BY ROUTE INITIAL TRAINING",
        },
        is3D: true,
      },
    };
  },
  
 mounted() {
   this.$store.dispatch("setFiData") // it calls the API
   .then(()=> {
     //Just run getData() when your api request is finished
      this.getData();
   })
  },

methods: {
    getData() {
      this.data = this.$store.getters.fiData;
      this.chartData = [];
      this.dataFemme = [];
      this.dataHomme = [];
      this.filieres = [];
      if (this.data.length) {
        for (let i = 0; i < this.data.length; i++) {
          this.chartData.push([this.data[i].filiere, this.data[i].total]);
          this.dataHomme.push(this.data[i].homme);
          this.dataFemme.push(this.data[i].femme);
          this.filieres.push(this.data[i].filiere);
          this.totalHomme += this.data[i].homme;
          this.totalFemme += this.data[i].femme;
        }
        this.totalGeneral = this.totalHomme + this.totalFemme;
      } else {
        console.log("NO DATA");
      }
    },
},
},

【讨论】：