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

在main.js引入

import store from './store'App.mpType = 'app'const app = new Vue({store,...App
})
app.$mount()

在需要计时的页面引入

<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 % 60return `${minutes}:${seconds.toString().padStart(2, '0')}`},}}
</script>

在需要结束的页面调用

<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.timeconst minutes = Math.floor(time / 60)const seconds = time % 60console.log("结束时间的整数",time);console.log("结束时间",`${minutes}:${seconds.toString().padStart(2, '0')}`);},...mapMutations(['stopTimer']), // 结束计时},}
</script>