vue 后台数据获取与组件渲染、页面刷新数据消失的问题小结
来源:互联网 发布:sql触发器实例 old 编辑:程序博客网 时间:2024/05/16 08:56
1、使用Vue完成项目,从后台获取数据绑定到页面时,无法确保页面能在组件渲染前获取到所需的数据;
在下面两种情况中遇到过这个问题:
1)、子组件页面需要绑定后台数据到视图层:
解决方法:在父页面提前进行数据获取,用Vuex保存,然后子页面computed属性中返回该参数,即可保证渲染不出错;
PS:之前尝试过在子页面mounted、created等钩子函数中在组件创建前获取数据,但始终不行,即使能正确渲染,控制台仍然会报错;改用上述方法后,不会报错,刷新页面后数据仍然在;
2)、子组件中用Echarts画图,图表数据从后台获取:
用上述方法,即使在父页面提前获取数据,仍然报错;仍然无法保证页面绘制图表时,数据已经获取到;
解决措施:在mounted钩子函数中获取数据,然后将图表绘制步骤放置到$http.get()方法的回调函数中,在正确获取到数据后再进行图表绘制,在computed中返回对应参数;
上述两种情况中,解决措施都是为了保证组件在渲染时已经获取到了后台数据,这样才不会报错
2、页面刷新后,vuex中保存的数据将消失
解决措施:在父页面提前获取到数据,在保存到Vuex的同时,保存到sessionStorage中,然后在子页面data中将vuex中的值赋给对应参数;
重点是:在mounted函数中,将sessionStorage里保存的值赋给data中返回的对应参数,这样页面刷新后数据仍然存在。
PS:在使用sessionStorage存取数据时,必须注意格式,对象与数组要做对应的处理,才能保证正确存取。
以上就是目前为止遇到的关于数据获取后组件渲染以及页面刷新数据消失问题的解决措施小结。
- vue 后台数据获取与组件渲染、页面刷新数据消失的问题小结
- vue渲染从后台获取的json数据
- 一例解析通过$.ajax()获取后台服务器数据并通过vue渲染在页面中
- vue 页面跳转(兄弟组件)通过路由或vuex 进行传递参数,并且实现刷新数据不消失
- vue.js用vue-router路由传参时页面刷新后参数消失的问题
- vue——路由变化页面数据不刷新问题
- 页面刷新vuex数据消失问题解决方案
- AJax 把拿到的后台数据在页面中渲染
- vue-父组件获取子组件数据
- vue.js 数据渲染成功仍报错的问题
- Vue.js v-bind遇到的数据渲染问题
- 解决后台修改数据后在IE8中刷新网页还是之前的页面的问题
- 解决后台提交表单时,重复刷新页面时候重复提交数据的问题。
- Javaweb开发,实现'购物车'的遍历与操作(页面数据刷新、后台操作反馈)
- Vue入门学习-使用服务器传来的JSON数据交给Vue渲染HTML页面
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面
- jsp页面获取后台数据
- 刷新页面数据自动增加的问题
- POJ2065-SETI
- 一个很好用的模板(截取网络数据包)
- Kendo UI 使用札记
- [leetcode]106. Construct Binary Tree from Inorder and Postorder Traversal@Java结题报告
- MyEclipse10安装SVN插件
- vue 后台数据获取与组件渲染、页面刷新数据消失的问题小结
- 算法题目---和为s的两个数字vs和为s的连续正数序列
- JPanel、JScrollPane 面板详解
- 学习C++中的CustomDraw
- CUSTOMDRAW msdn网站
- 停车场(2)
- linux进行vi操作时的撤销操作
- 网录科技的优势
- Youcompleteme安装