《京保养》基于Vue+Vuex的单页面应用实践

接到《京保养》项目需求,了解到是移动端项目,运用于微信公众号及京东 APP 。通过与后端研发沟通,后端将提供所有的数据展示接口,这样最终商定使用前后端分离技术,而作为前端这边就非常适合选择基于 webpack + Vue 的单页面应用来实现。 前期组内也有基于单页面应用的项目总结,他们的总结的确让我在本项目中少走了很多弯路,但是不同的项目又遇到了不同的新问题,本文将会介绍我所遇到的新问题及解决方案。 感兴趣的同学可以通过以下两个入口先去体验下京保养应用,然后回来接着看文章: 微信公众号搜索“京东汽车用品” – 关注公众号 – 菜单栏“京保养”,见图1; 京东 APP – 我的 – 我的爱车 – 京保养,见图2。 图1 图2 如果你在 APP 中找不到“我的爱车”入口,你得先在京东 APP – 我的 – 设置 – 添加档案 – 我的爱车 – 绑定自己的爱车,然后才会有入口。 为什么要使用 Vuex 初拟技术选型,项目开始了,而开发过程中发现,项目中有不同的表单视图需要大量数据的共享。而仅使用单页面的路由来传参并不能满足需求,因为数据量过大,导致路由传参过于复杂。如此,项目中引进 Vuex 技术来实现数据共享。 拿项目中需要数据共享的地方举例 —— 绑定车辆模块。先来看下该模块的操作流程: 绑定车辆页面填写车牌号码; 填写车系,包含选择品牌、选择车系、选择年款; 回到了绑定车辆页面继续填写车辆绑定信息。 如果上字描述还不清楚,我也录了个小视频,点击查看交互流程: 可以看到这几个步骤中已经有多个视图的跳转了,但最终目的是将绑定车辆的信息填写完整。每一次跳转都需要将已经操作过的页面交互数据(比如:车牌号、车系信息、电话号码等)记录下来,最后回填到绑定车辆页面。这些数据如果没有一个可以由多个视图都能取得的地方存储,绑定车辆的信息永远也填写不完整,此时 Vuex 就可以派上了用场。 Vuex 的使用 Vuex 的具体使用,有几个核心概念: state —— 定义存储状态; getter —— 对数据进行过滤; mutation —— 更改 Vuex 的 […]

© 2017 JDC. All Rights Reserved.