Vue js组件和Chart js

Question

我有一个组件，它计算一个特定的骰子(例如1,2,3,4,5,6)的数量。我想将此计数器导出到另一个组件，在该组件中将使用此值来制作图表。

这是Dice组件

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导出到图表组件并放置到y轴

Answer 1

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