購物車 demo，帶你理解並使用 vuex 狀態管理
購物車
vuex 中建立兩個模組，分別用來記錄商品列表和購物車的狀態，store 的結構：
└───store
├───modules
│ └───cart.js
│ └───production.js
└───index.js
└───view
├───cart
│ └───index.vue
└───home
└───index.vue
/**
* @author wuner
* @date 2020/8/20 16:39
* @description
*/const state =
;const getters =
;const mutations =);
},};
const actions =
*/async
getproductions()
:3000/products`,,
);commit
('setproductions'
, result);}
,};export
default
;
/**
* @author wuner
* @date 2020/8/20 16:39
* @description
*/const state =
;const getters =
*/totalcount
(state)
)=> sum + count,0)
;},}
;const mutations =
else);
}},}
;const actions =
;export
default
;
加入購物車
/**
* @author wuner
* @date 2020/8/20 16:39
* @description
*/import local from
'../../utils/local'
;const state =
;const getters =
*/isallchecked
(state)
}return result;},
/** * 商品總數
* @param state
* @returns
*/totalcount
(state)
)=> sum + count,0)
;},/**
* 選中商品的總數
* @param state
* @returns
*/checkedcount
(state)
)=>
(ischecked ? sum + count : sum),0
,);}
,/**
* 選中商品的**合計
* @param state
* @returns
*/checkedprice
(state)
)=>
ischecked ? sum + totalprice *
100: sum,0,
);},
};const mutations =
else},
/** * 更新購物車中的商品資料
* @param state
* @param payload
*/updateproduction
(state, payload)
,/**
* 將商品新增到購物車
* @param state
* @param payload
*/addtocarts
(state, payload)
else);
}},/**
* 移除購物車中的商品
* @param state
* @param payload
*/removefromcarts
(state, payload),}
;const actions =
;export
default
;
小計: ￥}
全選
已選 } 件商品
/**
* @author wuner
* @date 2020/8/20 16:38
* @description
*/import vuex from
'vuex'
;import vue from
'vue'
;import production from
'./modules/production'
;import cart from
'./modules/cart'
;vue.
use(vuex)
;import local from
'../utils/local'
;const
myplugin
=(store)
=>
// 快取cart模組狀態
mutation.type.
startswith
('cart/')&&
local.
set(
'productionscart'
, state.cart.productionscart);}
);};
const state =
;const getters =
;const mutations =
;const actions =
;const store =
newvuex.store(,
// 外掛程式
plugins:
[myplugin],}
);export
default store;
購物車案例
寫錄入系統的介面 var express require express 引入mongoose var mongoose require mongoose mongoose.connect mongodb var con mongoose.connection 判斷是否連線成功 con.on ope...
redux 案例購物車
1，環境我不搭建了，直接寫！import react from react import from react redux import from redux import as actions from actions.js import shopitem from shopitem calcto...
vuex實現購物車邏輯
在小型專案中，元件與元件之間通訊比較簡單。父元件可以使用pros向子元件傳遞資料，子元件可以通過 emit向父元件傳遞事件和資料，一旦狀態管理多了，就會變得十分混亂。由於狀態零散的分布在許多元件和元件之間的互動中，大型應用複雜度也經常逐漸增長。vuex狀態管理庫可以很方便的統一管理專案的狀態，無論是...