页面刷新倒计时不消失

最新推荐文章于 2022-03-24 17:20:50 发布

原创最新推荐文章于 2022-03-24 17:20:50 发布 · 503 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

在vuex定义了个倒计时方法，页面刷新后在mounted引用

//html代码
<el-butto @click="getVerifyCode":disabled="disabled">
  {{ disabled ? `${count}s` : '点击发送验证码' }}
</el-button>
//倒计时秒数
computed: {
    count() {
      return this.$store.state.paymentRunTime;
    },
  },
//点击发送按钮触发
getVerifyCode(){
  this.disabled = true;
  this.$store.commit("TimeReduction", {time: 60})
}
//刷新后触发
mounted() {
    if (sessionStorage.getItem("time")) {
      this.disabled=true;
      this.$store.commit("TimeReduction", {
        time: sessionStorage.getItem("time")
      });
    }
  }

//vuex代码
  //state
  paymentRunTime: sessionStorage.getItem('time')
  //mutations
  TimeReduction(state,{time}) {
    state.paymentRunTime=time
    let timerId = setInterval(() => {
      if (state.paymentRunTime === 0) {
        sessionStorage.removeItem("time")
        return clearInterval(timerId)
      }
      state.paymentRunTime --;
      sessionStorage.setItem('time', state.paymentRunTime)
    }, 1000);
  },