实现倒计时功能,可以使用一个定时器 (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是存储在内存里的 所以需要持久化
但是手写比较麻烦 我直接放弃 所以我们来用插件
非常简单只需要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>