功能需求,在A页面进入时候开始计时中间会去到B页面查看数据,但是并没有销毁当前页面,所以计时一直在,直到在B页面提交数据,才结束计时
javascript
在根文件夹创建 store文件夹,同时创建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
// 开始时间
// startTime: null,
// 结束时间
endTime: null,
// 计时器对象
timerot: null,
// 计时时间
time: 0
},
mutations: {
// 设置计时器对象
setTimer(state, timerot) {
state.timerot = timerot
},
// 设置计时时间
setTime(state, time) {
state.time = time
},
// 停止计时器
stopTimer(state) {
clearInterval(state.timerot)
state.timerot = null
},
// 重置计时时间
resetTime(state) {
state.time = 0
}
},
actions: {
}
})
export default store
在main.js引入
javascript
import store from './store'
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
在需要计时的页面引入
javascript
<template>
<text class="titlename">{{ formatTime }}</text>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
beforeDestroy() {
this.stopTimer()
},
onLoad() {
// 计时开始
this.startTimer()
},
methods: {
// 顶部计时
// 开始计时
startTimer() {
this.resetTime()
this.setTimer(setInterval(() => {
this.setTime(this.time + 1)
}, 1000))
},
...mapMutations(['setTimer', 'setTime', 'resetTime']),
},
computed: {
// 格式化计时时间
formatTime() {
const minutes = Math.floor(this.time / 60) < 10 ? "0" + Math.floor(this.time / 60) : Math.floor(this.time / 60)
const seconds = this.time % 60
return `${minutes}:${seconds.toString().padStart(2, '0')}`
},
}
}
</script>
在需要结束的页面调用
javascript
<template>
<view class="oo_item sure_i_want_to_exit out_flex_cc"
@click="ConfirmSubmissionOfPapers"
>
确认提交
</view>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
methods: {
// 确认提交
ConfirmSubmissionOfPapers(){
// 结束计时
this.stopTimer()
// 在这里可以获取到计时时间 time,并进行后续操作
const time = this.time
const minutes = Math.floor(time / 60)
const seconds = time % 60
console.log("结束时间的整数",time);
console.log("结束时间",`${minutes}:${seconds.toString().padStart(2, '0')}`);
},
...mapMutations(['stopTimer']), // 结束计时
},
}
</script>