时间戳

首页 > 解决方案 > Vue js 组件和 Chart js

javascript - Vue js 组件和 Chart js

问题描述

我有一个组件可以计算出现的特定骰子（例如 1、2、3、4、5、6）的数量。我想将此计数器导出到另一个组件，该值将用于制作图表。

这是骰子组件

export default {
name: "RollDice",
data(){
  return{
    rolling: 0,
    interval: null,
    counter1:0,
    counter2:0,
    counter3:0,
    counter4:0,
    counter5:0,
    counter6:0,
    totalCounter:0
  };
},
methods:{
  rollOnce(){
    var rollingOnce= Math.ceil(Math.random()*6);
    this.rolling= rollingOnce;
    if(rollingOnce==1)
     this.counter1++;
    if(rollingOnce==2)
      this.counter2++;
    if(rollingOnce==3)
      this.counter3++;
    if(rollingOnce==4)
      this.counter4++;
    if(rollingOnce==5)
      this.counter5++;
    if(rollingOnce==6)
      this.counter6++;
  },
  keepRolling(){
    var timeInterval = 500;
    for (var i = 0; i <100; i++) {
      this.interval=setTimeout(this.rollOnce, i * timeInterval)
    }

    if(interval==1)
      this.counter1++;
    if(interval==2)
      this.counter2++;
    if(interval==3)
      this.counter3++;
    if(interval==4)
      this.counter4++;
    if(interval==5)
      this.counter5++;
    if(interval==6)
      this.counter6++;
  },

我想将此 counter1,counter2,counter3,c​​ounter4,counter5,counter6 导出到 Chart 组件并放置到 y 轴

标签： javascriptvue.jschart.js

解决方案

您可以使用全局存储 (Vuex) 将计数器存储在那里，并进行适当的操作和突变以改变存储值。任何组件都可以访问这些值。

推荐阅读