Question

我在创建图表时遇到问题，问题是图表数据从vuex存储到vue组件，然后使用计算出的数据，我具有对数据进行一些更改的函数，然后尝试将新数据传递给图表数据的方法。

我尝试调用该方法，该方法将已计算的数据从mounted（），created（），beforemount（），beforecreate（）传递到图表数据，而没有任何效果

这是图表容器VUE：

<template>
  <!-- Main content -->
  <section class="content">
         <div class="row">
           <div class="col-md-6">

             <!-- AREA CHART -->
                 <div class="grid">
                     <ChartPie/>
                 </div>
             <!-- AREA CHART -->

             <!-- AREA CHART -->
                 <div class="grid">

                 </div>

           </div>
           <!-- /.col (LEFT) -->

           <div class="col-md-6">
             <!-- AREA CHART -->
                 <div class="grid">

                 </div>
             <!-- AREA CHART -->

             <!-- AREA CHART -->
                 <div class="grid">

                 </div>

           </div>
           <!-- /.col (RIGHT) -->
         </div>
         <!-- /.row -->

       </section>
       <!-- /.content -->
     </template>





   <script>
      import ChartPie from "../components/chart-pie";
      export default {
        components: {
          ChartPie,
        }
      };
      </script>

这是VUEX商店：动作：

actions:{
loadMachines ({commit}){
            axios.get("api/machine")
            .then(data => {
                console.log(data.data)
                let machines= data.data.data
                commit('SET_MACHINES',machines)
            })
            .catch(error => {
                console.log(error)
            })
        },
        loadPrevents ({commit}){
            axios.get("api/prevent")
            .then(data => {
                console.log(data.data)
                let prevents= data.data.data
                commit('SET_PREVENTS',prevents)
            })
            .catch(error => {
                console.log(error)
            })
        },
}

突变：

SET_MACHINES (state, machines){
            state.machines=machines
        },
        SET_PREVENTS (state, prevents){
            state.prevents=prevents
        }

状态：

state:{
        intervenants: [],
        fabriquants: [],
        machines: [],
        prevents: []
    },

这很明显：（最重要的一项）

<template>
  <div>
    <h2 class="bg-info text-center" >Nombre de panne par unité</h2>

    <div class="card">
      <chartjs-pie
        :bind="true"
        :datasets="datasets"
        :labels="labels"
        :option="option"
      />
    </div>
  </div>
</template>


<script>

import {mapState} from 'vuex'
export default {
  data() {
    return {
      loaded: false,
      datasets: [
        {
          data: [],
          backgroundColor: ["#b388ff", "#82b1ff", "#80d8ff", "#80d8ff", "#80d8ff", "#80d8ff", "#80d8ff"],
          hoverBackgroundColor: ["#673ab7", "#2196f3", "#03a9f4", "#03a9f4", "#03a9f4", "#03a9f4", "#03a9f4"]
        }
      ],
      labels: ["Meubles modulaires", "Les mètiers", "Meubles massifs", "Panoverre", "Métal design", "Poly-meuble", "L'art de salon"],
      option: {}
    }
  },
  mounted() {
    this.$store.dispatch('loadPrevents');
    this.$store.dispatch('loadMachines');
  },
  computed: {
    ...mapState([
        'prevents',
        'machines',
    ]),
      panne() {
      let machines_en_panne= []
      for (var i = 0, len = this.$store.state.prevents.length; i < len; i++) {
          machines_en_panne[i]= this.$store.state.prevents[i].machine ;
      }
      let countp= [0,0,0,0,0,0,0]
      for (var i = 0, len = this.$store.state.machines.length; i < len; i++) {
        if ( machines_en_panne.includes(this.$store.state.machines[i].nom) ){
          if (this.$store.state.machines[i].unite == 'Meubles modulaires')
          countp[0] ++;
          if (this.$store.state.machines[i].unite == 'Les mètiers')
          countp[1] ++;
          if (this.$store.state.machines[i].unite == 'Meubles massifs')
          countp[2] ++;
          if (this.$store.state.machines[i].unite == 'Panoverre')
          countp[3] ++;
          if (this.$store.state.machines[i].unite == 'Métal design')
          countp[4] ++;
          if (this.$store.state.machines[i].unite == 'Poly-meuble')
          countp[5] ++;
          if (this.$store.state.machines[i].unite == 'L\'art de salon')
          countp[6] ++;
        }
      }
      return countp;
    },
  },
  created(){
    this.datasets[0].data=this.panne
    this.loaded=true
  }
}
</script>

您可以在DevTools中看到，计算出的属性获得了正确的值，但是将这个值传递给数据的方法是在两个mapstate完全加载数据之前执行的，所以我总是获得初始值[0,0,0 ，0,0,0,0]

Data

Computed

VueX

编辑：超级奇怪

我在代码行中放置了将值从计算值传递到data（）的代码行，并知道当我在devtools中单击vue组件时，它会工作并用正确的值重新呈现图表。我该怎么办？？？

如何将vuex计算属性传递给vuejs图表数据？

0 个答案: