資訊專欄INFORMATION COLUMN
先對項目進行一下簡單的介紹
vue開發(fā)微信商城項目總結(jié)之一–項目介紹
項目開發(fā)初期，由于項目比較著急上線，前端的框架在選型上比較倉促，只是因為vue學(xué)習(xí)成本較低，就選了它，沒有什么別的原因，
之前看過angular2一段時間，又趁著周末看了兩天vue，就倉促開發(fā)，所以埋下了很多坑，項目（項目目前沒有對游客開放，是2B2C的模式）上線后，回頭填坑，發(fā)現(xiàn)了很多問題，因為之前一直是基于Jquery模式的開發(fā)，對于單頁面應(yīng)用的坑填起來比較崎嶇，項目中沒有引用類似于JQuery，zepto頻繁操作dom的框架。
當(dāng)然vuex根本沒有使用?？戳斯俜轿臋n，文檔寫的很詳細(xì)，但是在我看來，清楚的人看了更加清楚，迷糊的人看了更加迷糊，在github上找了一些關(guān)于vuex的demo，我總結(jié)了一下，demo永遠(yuǎn)都是demo，是為了使用vuex而使用vuex，無法和我的項目相關(guān)聯(lián)，vuex一再被擱淺，經(jīng)過不懈努力，總算是對vuex有所了解了，所以寫下這篇文章。
混淆了vuex和瀏覽器緩存
之前一直混淆了vuex和緩存，當(dāng)時的想法是既然vuex是全局變量，為何刷新頁面后，數(shù)據(jù)會丟失，現(xiàn)在不禁為當(dāng)時的想法感到可笑，
忽略了一個重點，就是vue是單頁面的框架，vuex中的store是全局的，在哪個頁面都可以調(diào)用
我用vuex就是來處理組件通訊的
之前沒有使用vuex，組件通訊數(shù)據(jù)是通過props來處理，事件是通過this.$emit()傳遞，起初沒什么，當(dāng)項目變得復(fù)雜了，就不是那么回事了，
父子組件交互過于復(fù)雜
看下這段代碼
這個是商品詳情頁調(diào)用的規(guī)格型號的子組件，傳遞的數(shù)據(jù)量太大，事件也很多，維護起來很費勁
還有一種情況，
父組件調(diào)用了子組件，子組件又調(diào)用了孫組件，
也就是出現(xiàn)了三級組件之間的交互和通訊，第一級和第三級如果要通訊只能通過第二級來中轉(zhuǎn)，想想就很low
舉個例子說明一下，下面是商品的詳情頁，和選擇規(guī)格型號的頁面
《vue開發(fā)微信商城項目總結(jié)之六--關(guān)于vuex的思考》 《vue開發(fā)微信商城項目總結(jié)之六--關(guān)于vuex的思考》
非vuex的寫法
我已經(jīng)將底部的一排按鈕封裝成組件，點擊下面的加入購物車按鈕，傳入默認(rèn)的規(guī)格型號和數(shù)量（1）調(diào)用后臺接口，加購物車，
如果想更換默認(rèn)的規(guī)格型號，則點擊（黑色4+64）按鈕，調(diào)用規(guī)格型號的子組件，將商品的相關(guān)信息（sku，是否上架，是否有貨，秒殺信息等等）傳遞給子組件，選擇完規(guī)格型號和數(shù)量后，點擊確定，調(diào)用父組件添加購物車的方法并傳入選擇的規(guī)格型號和數(shù)量添加購物車，
vuex的寫法
vuex中添加購物車數(shù)量的state全局變量，添加加入購物車的actions，
點擊父組件的添加購物車，vuex中的購物車數(shù)量加一，每點擊一次，加一，調(diào)用actions中的方法
規(guī)格型號子組件中，數(shù)量和父組件是中的購物車數(shù)量是同步的，點擊確定，掉用actions中的添加購物車方法，
父組件和子組件中的數(shù)量始終保持一致，不需要頻繁復(fù)雜的通訊
vuex減輕了組件之間的交互壓力，降低了代碼維護成本
項目持續(xù)更新維護中，還希望大神多多指點
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89161.html
摘要：關(guān)于項目的基本描述，參見開發(fā)微信商城項目總結(jié)之一項目介紹開發(fā)微信商城項目總結(jié)之二配置開發(fā)微信商城項目總結(jié)之三根據(jù)不同的開發(fā)環(huán)境做配置之前處理跨域問題是通過，但是只有開發(fā)環(huán)境是跨域的，代碼打包后上傳到服務(wù)器便不再跨域，所以在本地做了判斷，判斷 關(guān)于項目的基本描述，參見 vue開發(fā)微信商城項目總結(jié)之一–項目介紹 vue開發(fā)微信商城項目總結(jié)之二–Eslint配置 vue開發(fā)微信商城項目總結(jié)之...
摘要：項目是基于搭建，項目分為開發(fā)環(huán)境，測試環(huán)境，預(yù)生產(chǎn)環(huán)境，生產(chǎn)環(huán)境，其中開發(fā)環(huán)境和測試環(huán)境調(diào)用同一個接口，開發(fā)環(huán)境調(diào)用服務(wù)器端的測試接口會跨域，以上需求就引發(fā)了一些問題，問題一測試環(huán)境包括開發(fā)環(huán)境，并且開發(fā)環(huán)境跨域，預(yù)生產(chǎn)環(huán)境，生產(chǎn)環(huán)境，有 項目是基于vue-cli搭建，項目分為開發(fā)環(huán)境，測試環(huán)境，預(yù)生產(chǎn)環(huán)境，生產(chǎn)環(huán)境，其中開發(fā)環(huán)境和測試環(huán)境調(diào)用同一個接口，開發(fā)環(huán)境調(diào)用服務(wù)器端的測試接口...
摘要：根據(jù)產(chǎn)品提出的需求，需要做一個抽獎活動頁面需求簡介九宮格抽獎，中獎概率可配置，以九宮格轉(zhuǎn)盤的形式進行抽獎，獎品分為三類，實物類獎品，收貨人信息可編輯，默認(rèn)為登陸用戶，可生成訂單福幣類獎品，直接發(fā)放，可在交易明細(xì)中查看優(yōu)惠劵類獎品，交易明細(xì)中 根據(jù)產(chǎn)品提出的需求，需要做一個抽獎活動頁面 需求簡介 九宮格抽獎，中獎概率可配置，以九宮格轉(zhuǎn)盤的形式進行抽獎，獎品分為三類， 實物類獎品，收貨人...
摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
閱讀 2501·2021-10-12 10:11
閱讀 1252·2021-10-11 10:58
閱讀 3304·2019-08-30 15:54
閱讀 738·2019-08-30 13:59
閱讀 698·2019-08-29 13:07
閱讀 1433·2019-08-26 11:55
閱讀 2166·2019-08-26 10:44
閱讀 2692·2019-08-23 18:25
