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