Vue的JS方法与参数和setTimeout的

我想不通为什么这个代码工作..Vue的JS方法与参数和setTimeout的

data: { 
    return { 
     userMinerals: 0, 
     mineralsLimit: 1000, 
     miners: 0, 
     superMiner: 0, 
     minerPrice: 10, 
     superMinerPrice: 100, 
     minersLimit: 10 
    } 
} 
methods: { 
    counter() { 
     setInterval(() => { 
      this.userMinerals += this.miners; 

      if(this.checkLimit(this.userMinerals, this.mineralsLimit)) { 
       this.userMinerals = this.mineralsLimit; 
      } 
     }, 100); 
    }, 
    addMiner() { 
     if (this.userMinerals >= this.minerPrice) { 
      this.miners += 1; 
      this.userMinerals -= this.minerPrice; 
      this.counter(); 
     } 
    } 
}

..但如果我尝试把参数代入计数器（）的代码停止工作

methods: { 
    counter(typeOfCredits) { 
     setInterval(() => { 
      typeOfCredits += this.miners; 

      if(this.checkLimit(this.userMinerals, this.mineralsLimit)) { 
       typeOfCredits = this.mineralsLimit; 
      } 
     }, 100); 
    }, 
    addMiner() { 
     if (this.userMinerals >= this.minerPrice) { 
      this.miners += 1; 
      this.userMinerals -= this.minerPrice; 
      this.counter(this.userMinerals); 
     } 
    } 
}

从控制台我可以看到typeOfCredits得到递增，因为它应该但它不会更新视图中的值。 Thx求助

来源

2017-08-29 Nes Suno

的观点有'typeOfCredits'没有反应的参考，我的意思是这是一个简单的变量，它不是'属性data'。 – yuriy636

'typeOfCredits'不是数据属性。你需要在'counter'方法中使用'this.userMinerals' – thanksd

所以我应该使用数据属性作为函数参数？ –

你不能引用一个参数，并期望它在外面改变，但是你可以传递一个引用到一个可以改变外面的东西的对象。

var $this = this; 
this.counter({ 
    get() { return $this.userMinerals }, 
    set(val) { $this.userMinerals = val } 
});

，然后在柜台使用这样

counter(typeOfCredits) { 
     setInterval(() => { 
      typeOfCredits.set(typeOfCredits.get() + this.miners); 

      if(this.checkLimit(this.userMinerals, this.mineralsLimit)) { 
       typeOfCredits.set(this.mineralsLimit); 
      } 
     }, 100); 
    },

jsfiddle

来源

2017-08-29 18:09:32

Thx这非常清楚 –

typeOfCredits是该函数的一个参数。参数按值传递。修改它就像修改一个局部变量。

来源

2017-08-29 15:11:41

Vue的JS方法与参数和setTimeout的

回答

相关问题