uniapp小程序利用vuex实现计时器刷新不重置

- 日理万妓 2022-11-07 05:57 247阅读 0赞

js

import {
         setStorageSync, getStorageSync } from '@/common/utils/storage.js';
    
    export default {
        
    	state: {
          
    	     second:getStorageSync('second')?getStorageSync('second'):100, 
    	},  
    	getters: {
        },
    	mutations: {
        
    		updateTime(state:object){
        
    			this.timer=setInterval(()=>{
        
    				if(state.second == 0){
        
    					state.second = 100;
    					return clearInterval(this.timer)
    				}
    				state.second--;
    				setStorageSync('second',state.second)
    			},1000)
    		}
    	}
    }

html

<view class="getCode" @tap="getCode">{
       {second==100?'获取验证码':`已发送(${second})`}}</view>

computed: {
        
    	...mapState({
        
    		second: state => state.forgetPass.second
    	})
    },
    methods: {
        
    	...mapMutations(['updateTime']),
    	getCode(){
        
    		//判断是否重置
    		if (this.second == 100) {
        
    			//可在此处添加axios请求
    			this.updateTime();
    		}
    	}
    }

思路就是在vuex里面声明一个状态然后存到Storage里面持久化

发表评论取消回复

表情：

评论列表（有 0 条评论，247人围观）

还没有评论，来说两句吧...

相关阅读

相关 vuex-persistedstate Vuex刷新页面会重置

import Vue from 'vue' import Vuex from 'vuex' import createPersistedstate fr

快来打我*/ 2022年12月03日 02:23/ 0 赞/ 160 阅读

相关 uniapp小程序利用vuex实现计时器刷新不重置

js import { setStorageSync, getStorageSync } from '@/common/utils/storage.

- 日理万妓/ 2022年11月07日 05:57/ 0 赞/ 248 阅读

相关 uniapp 小程序图标不显示

不要把icon写在text里面不然小程序显示不了， H5可以显示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

ゝ一世哀愁。/ 2022年11月01日 05:45/ 0 赞/ 531 阅读

相关 layui表格筛选列不随页面刷新重置

Layui table 自带筛选列的功能，但是这个筛选列会随着页面的刷新重置。用户第二次进入页面或者进行table手工渲染，都会使得筛选项重置。本例利用layui自带的本

朴灿烈づ我的快乐病毒、/ 2022年10月09日 06:30/ 0 赞/ 326 阅读

相关小程序写计时器

let t; Page({ onLoad: function (options) { this.queryTime(); }

快来打我*/ 2022年09月02日 13:44/ 0 赞/ 151 阅读

相关 js刷新页面的重置

js刷新页面后实现的功能，刷新页面的方法： 1，reload 方法，该方法强迫浏览器刷新当前页面。语法：location.reload(\[bForceGet\])

﹏ヽ暗。殇╰゛Y/ 2022年05月26日 12:26/ 0 赞/ 336 阅读

相关 LayUI table 刷新页面不重置页码

layui table 刷新页面时会自动将页码初始化成1，本章内容介绍怎么让layui table刷新页面后留在当前页要实现此方法主要使用到cookie存储最后一次翻页的页

悠悠/ 2022年02月20日 06:19/ 0 赞/ 1199 阅读

相关解决 uniapp 小程序运行不了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05laWxf

浅浅的花香味﹌/ 2021年09月18日 11:50/ 0 赞/ 1239 阅读

相关 vuex重置所有state

在正式场景中我们经常遇到一个问题，就是登出页面或其他操作的时候，我们需要重置所有的vuex，让其变为初始状态，那么，就涉及到了多种方法： 1、页面刷新：

我会带着你远行/ 2021年09月03日 03:39/ 0 赞/ 423 阅读

相关 vuex刷新页面数据不丢失

需求 `点击左侧菜单，右侧就显示相应的内容，这个是通过路由来实现的` `但是点击右测内容，展示左侧不同的标题，这个该怎么搞？` 大致思路 `1 将当前选中的数

爱被打了一巴掌/ 2021年08月30日 12:26/ 0 赞/ 472 阅读