Question

我有一个组件可以计算特定骰子的数量（例如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，counter4，counter5，counter6导出到Chart组件并放置到y轴

Answer 1

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

Vue js组件和图表js

1 个答案: