uni-app vuex全局计时

功能需求，在A页面进入时候开始计时中间会去到B页面查看数据，但是并没有销毁当前页面，所以计时一直在，直到在B页面提交数据，才结束计时

在根文件夹创建 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

在main.js引入

import store from './store'

App.mpType = 'app'

const app = new Vue({
	store,
	...App
})
app.$mount()
1
2
3
4
5
6
7
8
9

在需要计时的页面引入

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在需要结束的页面调用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31