vue组件中倒计时,刷新页面不会从头开始

开启倒计时,直接保存到vuex中,且存储到本地持久化

// state.js

const runTime = localStorage.getItem(‘time‘);

paymentRunTime:runTime
//  mutations.js

TimeReduction(state) {
    this.timerId = setInterval(() => {
      if (state.paymentRunTime === 0) {
         state.paymentRunTime = 60;
         return clearInterval(this.timerId)
      }
       state.paymentRunTime -= 1;
      localStorage.setItem(‘time‘,state.paymentRunTime)
    },1000);
  },

在需要用到的页面钩子函数调用方法, created(){ this.$store.commit(TimeReduction) }

原文地址:https://www.cnblogs.com/zhaohui-116/p/12399205.html

时间: 2024-11-12 22:39:29

vue组件中倒计时,刷新页面不会从头开始的相关文章

vue组件中使用iframe元素

需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul> <li v-for="item in webAddres

vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </

vue组件中的通信

一.组件间的关系 1.父子关系 2.兄弟关系 3.隔代关系 二.组件间的通信方式 1.props 2.$emit/$on 3.VUEX 4.$parent/$children 5.$attrs/$listeners 6.provide/inject 三.通信方式举例 新建了一个过程,采用webpack来管理项目.  方法一:props / $emit 1.props---父组件向子组件传值 子组件:sub1.vue 父组件:app.vue 父组件通过props向下传递给子组件.注:组件中的数据共

nuxtjs在vue组件中使用window对象编译报错的解决方法

我们知道nuxtjs是做服务端渲染的,他有很多声明周期是运行在服务端的,以及正常的vue声明周期mounted之前均是在服务端运行的,那么服务端是没有比如window对象的location.navagitor等,以及H5的FormData()方法,所以当你在created之前使用这些时,会报错,那么如何处理呢? 1.自己的写的函数里包含window等 因为nuxt为SSR框架,所以其编译打包时会区分服务端渲染还是客户端渲染(即浏览器),在vue文件中使用window对象报错的原因是,webpac

ASP.NET—015:ASP.NET中无刷新页面实现

原文作者:杨友山 原文地址:http://blog.csdn.net/yysyangyangyangshan/article/details/39679823 前面也说过在asp.net中前后前交互的问题.使用了ajax.js的方法:$.post和$.ajax. http://blog.csdn.net/yysyangyangyangshan/article/details/22755007和http://blog.csdn.net/yysyangyangyangshan/article/det

关于网页中不刷新页面改变验证码的两种方法

今天做一个注册的页面,需要输入验证码.验证码的生成是动态的,不过要刷新页面,才能改变验证码,因为刷新后浏览器会向服务器提交新的请求,服务器就动态生成新的验证码响应给浏览器.为了能够在不刷新页面的情况下改变验证码,需要JavaScript的支持. 第一种方法是在请求地址后面带参数,这是一个小窍门.因为浏览器访问服务器的时候地址后面可以带上参数一起传给服务器,而加载内容是只看地址不看后面的参数:另外在<img src="地址"/>中,只要浏览器发现地址改变了就会自动重新加载该地

【Lua】遍历目录结果输出到页面中,刷新页面后出现500 Internal Server Error

在通过lua获取目录json字符串,然后作为数据源,通过Extjs生成树的过程中,发生了一个奇怪的问题,那就是获取目录json字符串然后传递给Extjs生成树的这个过程中,一开始都是很顺利的就生成了,不过再刷新页面的时候,json字符串突然收不到了,由于没有更改任何内容,两次操作的代码环境都是一样的,仅仅是刷新了页面,重新再次获取这个过程.结果就出现了问题. 百思不解,以为是Extjs的问题,各种配置均没有效果,然后就想着是否是json字符串的问题,于是在页面内直接访问lua文件,第一次成功返回

vue组件中的style scoped中遇到的问题

在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点.添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识,当然也会给当前style的所有样式添加[data-v-1233]这样的话,就可以使得当前样式只作用于当前组件的节点.但是我们需要注意的是如果我们添加了子组件,同样的,如果子组件也用scoped标识了,那么在父组件中是不能设置子组件中的节点的.若父组件有scoped,子组件没有设置,同样

vue组件中click事件失效

最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动.在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click.v-bind:click.@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功. 后来在使用vuex的时候一直报"[vuex] unknown mutation type: changeCity&