记录h5表单离开页面时数据储存及取出的问题

h5表单页面，跳转到指定页面时，表单页面数据储存:
1.采用keepAlive坑太多，数据偶尔丢失；
2.可以使用vuex：将表单页面数据存入store，回来时再将所需数据取出。

表单页面：

 // 路由离开的时候，判断跳转去的页面路由是否需要缓存beforeRouteLeave(to, from, next) {if(to.name === "vote-application.vote.avatarPage") {let data = {formData:this.formData,tab:this.tab,projectList:this.projectList,joinList:this.joinList,sendList:this.sendList}//commit与mutations搭配使用（同步）//store.commit('commit方法名'，数据参数)store.commit('SAVE_LIST',data);}next()},

store.js文件：

import Vue from 'vue';
import Vuex from 'vuex';
import config from '@/config.js';
Vue.use(Vuex);export default new Vuex.Store({state: {//初始化定义数据statevoteList:{}},//这里不需要异步，就用mutations即可actions: {},mutations: {/*** 储存表单页面数据* @param state* @param data*/SAVE_LIST(state, data) {//将获取到的data数据赋值给state中的voteList值存起来，方便到时侯在store的state中去取值state.voteList = data || {}},},modules: {},
});

表单页面：

<script>//1.引入import {mapState} from 'vuex'//2.在computed中取出computed:{...mapState({voteArr:state => state.voteList})},//3.然后就可以在需要的地方使用created() {// 把存在vuex里面的值拿出来this.tab = this.voteArr.tabthis.formData = this.voteArr.formDatathis.projectList = this.voteArr.projectList     }
</script>

记录h5表单离开页面时数据储存及取出的问题相关推荐

chrome 不记录填写值,Chrome 中使用 onbeforeunload 来提示离开页面时数据是否已保存...
最简单的写法如下,效果是只要用户在当前页面有任何动作,在页面离开时都会显示确认框. 注意:这里返回的字符串原本是自定义的确认框消息,但现在已经不再支持了,仅显示浏览器默认的提示信息. ```javas ...
在可编辑表格EditorGrid中，我选择一行已输入的数据，点击删除按钮，该行数据将被删除，然后当我点击表单提交按钮时，已经被删除的那一行数据仍然被插入数据库中...
为什么80%的码农都做不了架构师?>>> 问题描述:在可编辑表格中,我选择一行已输入的数据,点击删除按钮,该行数据将被删除,然后当我点击表单提交按钮时,已经被删除的那一行数据仍 ...
环境企业表单权限分配填报数据系统设计与实现
本科生毕业论文(设计) Undergraduate Graduation Thesis(Design) 题目Title:环境企业表单权限分配填报数据系统设计与实现院系 School (Depar ...
h5 php表单验证,H5表单验证失败该怎样提示
这次给大家带来H5表单验证失败该怎样提示,怎么用H5表单验证失败的提示?H5表单验证失败提示的注意事项有哪些,下面就是实战案例,一起来看一下. 我们知道,前端的童鞋在写页面时, 都不可避免的总会踩到 ...
ExtJs 备忘录（4）—— Form表单（四） [ 数据提交 ]
一.截图和示例共用Ext.FormPanel 1.1 截图由于本文主要关注的是表单提交的几种方式,所以仅用了一个表单项以便于测试和减少示例代码. 1.2 示例共用Ext.FormPanel ...
js实现Form表单submit提交截获数据（各浏览器通用）
js实现Form表单submit提交截获数据(各浏览器通用) js实现Form表单submit提交截获数据(各浏览器通用) No Comments | js , 安全 , PHP | by calms ...
联系我们吧 - 12个联系我们表单和页面设计赏析和学习
设计网站时,关于我们页面和联系页面(contact us page)往往是必要页面之一.虽然只是一个简单的页面,但要真的能让用户有联系你的冲动还是很有挑战性.如果说,用户点击了联系页面,用户其实已经在 ...
泛微html模板与表单分离,泛微eteams业务表单，自动生成数据和报表
原标题:泛微eteams业务表单,自动生成数据和报表 eteams业务表单用数据重新定义协作,台帐记录.数据汇报.外部调研收集一并搞定.彻底告别传统纸笔数据收集方式,实时完成数据提交,自动生成数据和报 ...
html表单向本页面提交数据,从页面提交表单数据的步骤之(一)
从页面提交表单数据的方法之(一) 先说下开发中我使用的主要web利器: Bootstrap AdminLTE Jquery vue.js underscore.js 简介利用表单给服务器提交数据是网 ...

记录h5表单离开页面时数据储存及取出的问题

记录h5表单离开页面时数据储存及取出的问题相关推荐

最新文章

热门文章