vue-cli商城類項(xiàng)目，如何讓vuex發(fā)揮威力，

通過vue-cli開發(fā)商城類項(xiàng)目，
項(xiàng)目越來越大，產(chǎn)生的問題也就越來越多，類似的，商品列表頁，商品詳情頁，購(gòu)物車，每個(gè).vue文件行數(shù)過千，雖然已經(jīng)采用了組件化開發(fā)，但是產(chǎn)品需求做調(diào)整的時(shí)候，維護(hù)難度依然很大，目前并沒有采用vuex
問題來了，
第一：
vuex如何在商城類項(xiàng)目中使用，以提高開發(fā)效率，降低代碼維護(hù)成本，向購(gòu)物車頁面，詳情頁面，列表頁面，都是獨(dú)立的，不涉及到全局變量的問題，看過vuex的demo，然而demo只是demo，demo是為了使用vuex而使用vuex，并不適用于項(xiàng)目。
第二：
如上所說，代碼文件行數(shù)過多，包括了模板，js ，less ，增加了維護(hù)成本，已經(jīng)對(duì)個(gè)別功能進(jìn)行了組件化開發(fā)，但是，遠(yuǎn)遠(yuǎn)不夠，代碼量依然很大有沒有一種手段可以拆分。

還請(qǐng)有經(jīng)驗(yàn)的朋友給予幫助點(diǎn)播，感激不盡
項(xiàng)目介紹在這里
vue開發(fā)微信商城項(xiàng)目總結(jié)之一–項(xiàng)目介紹

回答

編輯回答

裸橙

代碼行數(shù)多，主要多在哪里？如果是 html 模板代碼多，那么可以考慮繼續(xù)切分組件，如果是 js 代碼多，那么基本上應(yīng)該是 methods 多以及業(yè)務(wù)邏輯復(fù)雜吧？那么把 methods 根據(jù)分類單獨(dú)放到一些模塊里應(yīng)該可以提升可維護(hù)性吧，在 .vue 文件中引入這些模塊然后放到 methods 聲明處。

感覺你對(duì) vuex 可能有點(diǎn)抵觸，不過說實(shí)話，商城類應(yīng)用還是挺適合使用 vuex 的，因?yàn)樯唐?、?gòu)物車、郵費(fèi)、促銷條件……彼此之間關(guān)聯(lián)挺密切的吧。前面說的把 methods 分為模塊，進(jìn)一步可以考慮把 methods 變成 vuex 的 mutations 和 actions，vuex 也按功能組織成不同的模塊。

總之，就是要進(jìn)一步加強(qiáng)組件化、模塊化，模塊化的作用是分治，把較大的、復(fù)雜的功能點(diǎn)分解成小的可控的模塊去實(shí)現(xiàn)和維護(hù)。

如果代碼行數(shù)多是在 css 部分，那可以把非 scoped style 的拎出來單獨(dú)放到一些 css（或 less、scss）文件中（有 UI 原型團(tuán)隊(duì)的話，這部分工作由 UI 原型團(tuán)隊(duì)來做）。

2018年2月26日 12:40

編輯回答

愛是癌

如果使用vuex，可以把url傳參的思想放到一邊，仔細(xì)研究vuex（結(jié)構(gòu)化數(shù)據(jù)的傳遞，多頁之間的數(shù)據(jù)綁定等），我一直在用vue+vuex+vux+nodejs做商城項(xiàng)目，用的還是比較順的。

聽你所說商品、購(gòu)物車之間幾乎沒有什么關(guān)聯(lián)性，那說明你忽視另一個(gè)重點(diǎn)，就是前后端數(shù)據(jù)緩存和減少服務(wù)端請(qǐng)求做的還不徹底。我們現(xiàn)在做法是：商品頁請(qǐng)求的數(shù)據(jù)會(huì)緩存，通過用戶購(gòu)買操作記錄本地，在購(gòu)物車頁面只讀取本地緩存，不再?gòu)姆?wù)端請(qǐng)求數(shù)據(jù)，只有最終提交訂單時(shí)才會(huì)請(qǐng)求；如果是庫存和價(jià)格等敏感信息，會(huì)單獨(dú)請(qǐng)求服務(wù)端，但在產(chǎn)品規(guī)劃一般不會(huì)，只有搶購(gòu)或大促時(shí)才會(huì)這么干。

希望以上對(duì)你有所幫助：）

2018年2月15日 14:13

編輯回答