vue-cli商城类项目，如何让vuex发挥威力，

Question

通过vue-cli开发商城类项目，
项目越来越大，产生的问题也就越来越多，类似的，商品列表页，商品详情页，购物车，每个.vue文件行数过千，虽然已经采用了组件化开发，但是产品需求做调整的时候，维护难度依然很大，目前并没有采用vuex
问题来了，
第一：
vuex如何在商城类项目中使用，以提高开发效率，降低代码维护成本，向购物车页面，详情页面，列表页面，都是独立的，不涉及到全局变量的问题，看过vuex的demo，然而demo只是demo，demo是为了使用vuex而使用vuex，并不适用于项目。
第二：
如上所说，代码文件行数过多，包括了模板，js ，less ，增加了维护成本，已经对个别功能进行了组件化开发，但是，远远不够，代码量依然很大有没有一种手段可以拆分。

还请有经验的朋友给予帮助点播，感激不尽
项目介绍 在这里
vue开发微信商城项目总结之一–项目介绍

Answer 1

代码行数多，主要多在哪里？如果是 html 模板代码多，那么可以考虑继续切分组件，如果是 js 代码多，那么基本上应该是 methods 多以及业务逻辑复杂吧？那么把 methods 根据分类单独放到一些模块里应该可以提升可维护性吧，在 .vue 文件中引入这些模块然后放到 methods 声明处。

感觉你对 vuex 可能有点抵触，不过说实话，商城类应用还是挺适合使用 vuex 的，因为商品、购物车、邮费、促销条件……彼此之间关联挺密切的吧。前面说的把 methods 分为模块，进一步可以考虑把 methods 变成 vuex 的 mutations 和 actions，vuex 也按功能组织成不同的模块。

总之，就是要进一步加强组件化、模块化，模块化的作用是分治，把较大的、复杂的功能点分解成小的可控的模块去实现和维护。

如果代码行数多是在 css 部分，那可以把非 scoped style 的拎出来单独放到一些 css（或 less、scss）文件中（有 UI 原型团队的话，这部分工作由 UI 原型团队来做）。

Answer 2

感谢您耐心的解答，受益匪浅
但是还有几个不理解的地方：

商品、购物车、邮费、促销条件……彼此之间关联挺密切的吧

我们的这个项目，在前端代码里，他们几乎没有什么关联性。列表到详情，前端只是通过url传递一个skuid，购物车更是独立的，在这样的情况下，vuex还适用吗？

Answer 3

如果使用vuex，可以把url传参的思想放到一边，仔细研究vuex（结构化数据的传递，多页之间的数据绑定等），我一直在用vue+vuex+vux+nodejs做商城项目，用的还是比较顺的。

听你所说商品、购物车之间几乎没有什么关联性，那说明你忽视另一个重点，就是前后端数据缓存和减少服务端请求做的还不彻底。我们现在做法是：商品页请求的数据会缓存，通过用户购买操作记录本地，在购物车页面只读取本地缓存，不再从服务端请求数据，只有最终提交订单时才会请求；如果是库存和价格等敏感信息，会单独请求服务端，但在产品规划一般不会，只有抢购或大促时才会这么干。

希望以上对你有所帮助 ：）