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>
相关推荐
逐·風3 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫33 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果3 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰4 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询