vuex使用場景:1、用戶的個人信息管理模塊;2、電商項目的購物車模塊;3、我的訂單模塊,訂單列表中點擊取消訂單,然后更新對應(yīng)的訂單列表;4、在訂單結(jié)算頁,獲取需要的優(yōu)惠券,并更新訂單優(yōu)惠信息。
本教程操作環(huán)境:windows7系統(tǒng)、vue2.9.6版、Dell G3電腦。
首先,我們先來探討一下,什么情況下vuex才是必須要到的呢?
-
需要數(shù)據(jù)共享和行為進行拆分;
-
復(fù)雜的異步邏輯,需要綜合多個模塊進行狀態(tài)演進;
-
需要用到第三方插件;
-
需要綜合考慮多個組件的生命周期,先后順序,特定邏輯等等;
vuex使用的場景:
-
用戶的個人信息管理模塊;
-
電商項目的購物車模塊,每次都調(diào)用獲取購物車數(shù)量的接口(前提得有),效果是實現(xiàn)了,但是每一次的HTTP請求,都是對瀏覽器性能消耗。 對比下來,用vuex的mutations進行觸發(fā),就顯得更加有優(yōu)勢;
-
我的訂單模塊,訂單列表也點擊取消訂單,然后更新對應(yīng)的訂單列表,這種情況也是用Vuex,state儲存一個狀態(tài),監(jiān)聽這個狀態(tài),變化時更新對應(yīng)的列表;
-
從訂單結(jié)算頁,進入選擇優(yōu)惠券的頁面,選擇優(yōu)惠券的頁面。如何保存選擇的優(yōu)惠券信息?state保存優(yōu)惠券信息,選擇優(yōu)惠券時,mutations提交,在訂單結(jié)算頁,獲取選擇的優(yōu)惠券,并更新訂單優(yōu)惠信息;