开启倒计时，直接保存到vuex中，且存储到本地持久化

// state.jsconst runTime = localStorage.getItem('time');paymentRunTime:runTime

// mutations.jsTimeReduction(state) { this.timerId = setInterval(() => { if (state.paymentRunTime === 0) { state.paymentRunTime = 60; return clearInterval(this.timerId) } state.paymentRunTime -= 1; localStorage.setItem('time',state.paymentRunTime) },1000); },

在需要用到的页面钩子函数调用方法， created（）{ this.$store.commit(TimeReduction) }

知识点扩展：

倒计时实例代码：

<template><div class="captcha-row"><input class="captcha-input" placeholder="输入验证码" auto-focus /><div v-if="showtime===null" class="captcha-button" @click="send">获取验证码</div><div v-else class="captcha-button">{{showtime}}</div></div></template>

<script>export default {data() {return {// 计时器,注意需要进行销毁timeCounter: null,// null 则显示按钮 秒数则显示读秒showtime: null}},methods: {// 倒计时显示处理countDownText(s) {this.showtime = `${s}s后重新获取`},// 倒计时 60秒 不需要很精准countDown(times) {const self = this;// 时间间隔 1秒const interval = 1000;let count = 0;self.timeCounter = setTimeout(countDownStart, interval);function countDownStart() {if (self.timeCounter == null) {return false;}count++self.countDownText(times - count + 1);if (count > times) {clearTimeout(self.timeCounter)self.showtime = null;} else {self.timeCounter = setTimeout(countDownStart, interval)}}},send() {this.countDown(60);}},}</script>

以上就是vue倒计时刷新页面不会从头开始的解决方法的详细内容，更多关于vue倒计时刷新页面不会从头开始的资料请关注亿速云其它相关文章！