uni-app vuex全局计时

功能需求,在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>
相关推荐
麦兜*1 小时前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
知了一笑1 小时前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室2 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~2 小时前
重学前端004 --- html 表单
前端·html
TE-茶叶蛋2 小时前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
遇到困难睡大觉哈哈2 小时前
CSS中的Element语法
前端·css
Real_man2 小时前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中2 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术2 小时前
日历插件-FullCalendar的详细使用
前端·javascript
咔咔一顿操作2 小时前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue