开启倒计时,直接保存到vuex中,且存储到本地持久化
//state.js
const运行时=localStorage.getItem(的时间);
paymentRunTime:运行时
//mutations.js
TimeReduction(状态){
这一点。timerId=setInterval(()=比;{
如果状态。paymentRunTime===0) {
状态。paymentRunTime=60;
返回clearInterval (this.timerId)
}
状态。paymentRunTime -=1;
localStorage.setItem(‘时间’,state.paymentRunTime)
}，1000）;
},
在需要用到的页面钩子函数调用方法,
<强>知识点扩展:
倒计时实例代码:
& lt; template>
类,& lt; div=" captcha-row "比;
,& lt;输入类=癱aptcha-input”占位符=笆淙胙橹ぢ搿弊远越?比;
,& lt; div v=皊howtime===null”class=癱aptcha-button @click=胺⑺汀北?
获才能取验证码
,& lt;/div>
,& lt; div v-else类=癱aptcha-button”比;
,,{{showtime}}
,& lt;/div>
,& lt;/div>
& lt;/template>
& lt; script>
出口默认{
,数据(){
,返回{//计才能时器,注意需要进行销毁
timeCounter:空,才能//空才能则显示按钮秒数则显示读秒
showtime才能:零
,}
},
,方法:{
,//倒计时显示处理
,countDownText (s) {
这才能。showtime=" ${}年代后重新获取的
},
,//倒计时60秒不需要很精准
,倒计时(次){
const才能自我=;//时才能间间隔1秒
const才能间隔=1000;
我们才能计算=0;
,自我。timeCounter=setTimeout (countDownStart,间隔);
函数才能countDownStart () {
如果(才能自我。timeCounter==null) {
,,返回错误;
,,}
+ +,计数
,自我。countDownText(* -数+ 1);
如果才能(计数比;次){
,,clearTimeout (self.timeCounter)
,,自我。showtime=零;
}{其他才能
,,自我。timeCounter=setTimeout (countDownStart间隔)
,,}
,,}
},
,发送(){
this.countDown才能(60);
,}
},
}
& lt;/script>
以上就是vue倒计时刷新页面不会从头开始的解决方法的详细内容,更多关于vue倒计时刷新页面不会从头开始的资料请关注其它相关文章!
