国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue開發微信商城項目總結之六--關于vuex的思考

PrototypeZ / 1119人閱讀

先對項目進行一下簡單的介紹

vue開發微信商城項目總結之一–項目介紹

項目開發初期，由于項目比較著急上線，前端的框架在選型上比較倉促，只是因為vue學習成本較低，就選了它，沒有什么別的原因，

之前看過angular2一段時間，又趁著周末看了兩天vue，就倉促開發，所以埋下了很多坑，項目（項目目前沒有對游客開放，是2B2C的模式）上線后，回頭填坑，發現了很多問題，因為之前一直是基于Jquery模式的開發，對于單頁面應用的坑填起來比較崎嶇，項目中沒有引用類似于JQuery，zepto頻繁操作dom的框架。

當然vuex根本沒有使用。看了官方文檔，文檔寫的很詳細，但是在我看來，清楚的人看了更加清楚，迷糊的人看了更加迷糊，在github上找了一些關于vuex的demo，我總結了一下，demo永遠都是demo，是為了使用vuex而使用vuex，無法和我的項目相關聯，vuex一再被擱淺，經過不懈努力，總算是對vuex有所了解了，所以寫下這篇文章。

混淆了vuex和瀏覽器緩存

之前一直混淆了vuex和緩存，當時的想法是既然vuex是全局變量，為何刷新頁面后，數據會丟失，現在不禁為當時的想法感到可笑，

忽略了一個重點，就是vue是單頁面的框架，vuex中的store是全局的，在哪個頁面都可以調用

我用vuex就是來處理組件通訊的

之前沒有使用vuex，組件通訊數據是通過props來處理，事件是通過this.$emit()傳遞，起初沒什么，當項目變得復雜了，就不是那么回事了，

父子組件交互過于復雜

看下這段代碼

這個是商品詳情頁調用的規格型號的子組件，傳遞的數據量太大，事件也很多，維護起來很費勁

還有一種情況，

父組件調用了子組件，子組件又調用了孫組件，

也就是出現了三級組件之間的交互和通訊，第一級和第三級如果要通訊只能通過第二級來中轉，想想就很low

舉個例子說明一下，下面是商品的詳情頁，和選擇規格型號的頁面


《vue開發微信商城項目總結之六--關于vuex的思考》 《vue開發微信商城項目總結之六--關于vuex的思考》

非vuex的寫法

我已經將底部的一排按鈕封裝成組件，點擊下面的加入購物車按鈕，傳入默認的規格型號和數量（1）調用后臺接口，加購物車，

如果想更換默認的規格型號，則點擊（黑色4+64）按鈕，調用規格型號的子組件，將商品的相關信息（sku，是否上架，是否有貨，秒殺信息等等）傳遞給子組件，選擇完規格型號和數量后，點擊確定，調用父組件添加購物車的方法并傳入選擇的規格型號和數量添加購物車，

vuex的寫法

vuex中添加購物車數量的state全局變量，添加加入購物車的actions，

點擊父組件的添加購物車，vuex中的購物車數量加一，每點擊一次，加一，調用actions中的方法

規格型號子組件中，數量和父組件是中的購物車數量是同步的，點擊確定，掉用actions中的添加購物車方法，

父組件和子組件中的數量始終保持一致，不需要頻繁復雜的通訊

vuex減輕了組件之間的交互壓力，降低了代碼維護成本

項目持續更新維護中，還希望大神多多指點

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89161.html

相關文章

  • vue開發微信商城項目總結之四--本地代理處理跨域問題

    摘要：關于項目的基本描述，參見開發微信商城項目總結之一項目介紹開發微信商城項目總結之二配置開發微信商城項目總結之三根據不同的開發環境做配置之前處理跨域問題是通過，但是只有開發環境是跨域的，代碼打包后上傳到服務器便不再跨域，所以在本地做了判斷，判斷 關于項目的基本描述，參見 vue開發微信商城項目總結之一–項目介紹 vue開發微信商城項目總結之二–Eslint配置 vue開發微信商城項目總結之...

    Leck1e 評論0 收藏0

  • vue開發微信商城項目總結之三--根據不同的開發環境做配置

    摘要：項目是基于搭建，項目分為開發環境，測試環境，預生產環境，生產環境，其中開發環境和測試環境調用同一個接口，開發環境調用服務器端的測試接口會跨域，以上需求就引發了一些問題，問題一測試環境包括開發環境，并且開發環境跨域，預生產環境，生產環境，有 項目是基于vue-cli搭建，項目分為開發環境，測試環境，預生產環境，生產環境，其中開發環境和測試環境調用同一個接口，開發環境調用服務器端的測試接口...

    Magicer 評論0 收藏0

  • vue開發微信商城項目總結之五--vue實現九宮格抽獎

    摘要：根據產品提出的需求，需要做一個抽獎活動頁面需求簡介九宮格抽獎，中獎概率可配置，以九宮格轉盤的形式進行抽獎，獎品分為三類，實物類獎品，收貨人信息可編輯，默認為登陸用戶，可生成訂單福幣類獎品，直接發放，可在交易明細中查看優惠劵類獎品，交易明細中 根據產品提出的需求，需要做一個抽獎活動頁面 需求簡介 九宮格抽獎，中獎概率可配置，以九宮格轉盤的形式進行抽獎，獎品分為三類， 實物類獎品，收貨人...

    CoorChice 評論0 收藏0

  • 前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    pumpkin9 評論0 收藏0

發表評論

0條評論

PrototypeZ

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<