vue倒计时刷新不重置 时间戳

setInterval 函数

实现倒计时功能，可以使用一个定时器 (timer) 来更新倒计时的时间值。

首先，你需要在 Vue 组件中声明一个计时器变量和一个倒计时剩余时间变量

data() {
  return {
    timer: null,
    countDownTime: 60
  }
}

然后，你可以在组件的 created 钩子函数中设置定时器，每隔一段时间更新倒计时的剩余时间：

created() {
  this.timer = setInterval(() => {
    this.countDownTime--;
  }, 1000);
}

最后，你可以使用一个计算属性来格式化倒计时的剩余时间，并在组件模板中使用这个计算属性来显示倒计时：

computed: {
  countDown() {
    const minutes = Math.floor(this.countDownTime / 60);
    const seconds = this.countDownTime % 60;
    return `${minutes}:${seconds}`;
  }
}

如果你想让倒计时刷新不重置，可以在组件的 beforeDestroy 钩子函数中清除定时器：

beforeDestroy() {
  clearInterval(this.timer);
}

这样，当组件销毁时，定时器就会被清除，倒计时就不会再继续更新了。

---

vuex存储

因为vuex是存储在内存里的 所以需要持久化

但是手写比较麻烦 我直接放弃 所以我们来用插件

非常简单只需要npm install vuex-persistedstate --save

然后在store下的index.js中更改下配置 网上帖子很多 可以去找一下

import Vue from "vue";
import Vuex from "vuex";
import modules from './module';
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    OldTime: 0,
    DifferenceTime: 0,
  },
  mutations: {
    SetOldTime(state, value) {
      state.OldTime = Date.now();
      this.commit('ApplyTimer');
    },
    SetDifferenceTime(state, value) {
      state.DifferenceTime = value;
    },
    ApplyTimer(state, value) {
      let Num = 0;
      let Timer = null;
      Timer = setInterval(_ => {
        Num = Math.abs((11 - (Date.now() * 1 - state.OldTime) / 1000 % 60).toFixed(0));
        this.commit('SetDifferenceTime', Num);
        if (Num == 0) {
          clearInterval(Timer);
        }
      }, 333);
    }
  },
  modules,
  getters: {
    DifferenceTime: state => {
      return state.DifferenceTime;
    }
  },
  plugins: [createPersistedState()],
});

<template>
  <div class="home2">
    <el-button type="primary" plain @click="SetOldTime"
      >验证码({{ DifferenceTime }})</el-button
    >
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "home2",
  methods: {
    ...mapMutations(["SetOldTime", "ApplyTimer"]),
  },
  computed: {
    ...mapGetters(["DifferenceTime"]),
  },
  created() {
    if (this.DifferenceTime != 0) {
      this.ApplyTimer();
    }
  },
};
</script>