vuex购物车思路,vue购物车功能怎么实现
这篇文章主要为大家详细介绍了基于状态管理实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了状态管理实现购物车功能的具体代码，供大家参考，具体内容如下
先看效果：
代码：
模板
div class=Home
h1vuex购物车案例/h1
添加源/添加源
购物车/购物车
/div
/模板
脚本
从导入添加自./Add.vue
从导入购物车 ShopCart.vue
//@是/src的别名
//从" @/components/HelloWorld.vue "导入编译
导出默认值{
姓名：家，
组件：{
AddFrom，
购物车
},
};
/脚本
风格
表格{
宽度：800像素
边距：0自动；
边框：1px纯色# ccc
边框间距：0;
}
tbody th，
t车身td {
边框：1px纯色# ccc
文本对齐：居中；
}
h1{
文本对齐：居中；
}。添加{
宽度：800像素
边距：0自动；
}
/风格
父组件
模板
div class=add
div class=from-group
= 的标签商品编号/标签
input type= text v-model= shop。id placeholder=请输入商品编号
/div
div class=from-group
= 的标签商品名称/标签
input type= text v-model= shop。name placeholder=请输入商品名称
/div
div class=from-group
= 的标签商品价格/标签
input type= text v-model= shop。价格 placeholder=请输入商品价格
/div
div class=from-group
= 的标签商品数量/标签
input type= text v-model= shop。count placeholder=请输入商品数量
/div
div class=from-group
按钮@click=添加添加商品/按钮
/div
/div
/模板
脚本
导出默认值{
名称：添加，
data() {
返回{
商店：{}
};
},
方法：{
add(){
这个store.dispatch(addShopList ，this.shop)
this.shop={
id: ，
名称：,
价格：,
计数：""
}
}
}
};
/脚本
样式范围。添加{
宽度：800像素
文本对齐：居中；
}
/风格
``狂欢
模板
购物手推车
桌子
标题边框
tr
泰国(泰国)商品编号/th
泰国(泰国)商品名称/th
泰国(泰国)商品价格/th
泰国(泰国)商品数量/th
泰国(泰国)小计/th
泰国(泰国)操作/th
/tr
/thead
tbody v-if=shop.length 0
tr v-for=(即 e)在商店:key=e
td{{ i.id }}/td
td{{ i.name }}/td
td{{ i.price }}/td
任务描述
按钮@click=添加/按钮
输入类型=text v-model=i.count /
button @ click= delet(e)-/button
/td
TD @{ {价格*数量} }/TD
tdbutton @click=del(e)删除/button/td
/tr
/tbody
设计表尾样式
tr
td colspan=6 align=right 总计：{{ total }}/td
button @click=clear 清除购物车/按钮
/tr
/tfoot
/表格
/div
/模板
脚本
导出默认值{
名称："购物车",
组件：{},
data() {
return { }；
},
计算值：{
商店(){
归还这个100美元商店。吸气剂。getlist
},
total() {
归还这个100美元商店。吸气剂。getshop total
}
},
方法：{
del(e) {
//这个store.dispatch()
这个. store.dispatch(remoteList ，e)；
},
添加(e) {
这个. store.dispatch(addList ，e)；
},
删除(五)
这个. store.dispatch(deleteList ，e)；
},
clear() {
这个. store.dispatch(clearList ，[])；
}
}
};
/脚本
状态管理组件
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
Vue.use(Vuex)
导出默认的新Vuex .商店({
状态：{
列表：[{
id: 1，
名称： 哇哈哈，
价格：3,
计数：0
},
{
id: 2，
名称： 哇哈，
价格：3,
计数：0
}
]
},
getters: {
//获取购物车数据
获取列表（状态){
返回状态列表
},
//商品的总价
getShopTotal(state，index) {
设结果=0;
state.list.forEach((item，index)={
结果=项目价格*项目数量
})
回送结果
},
},
突变：{
//删除购物车单个数据
远程列表(状态，索引){
state.list.splice(索引，1);
console.log(aaa ，状态)
},
//商品数量增加
添加列表(状态，索引){
state.list[index].数数；
},
//商品数量减少
删除列表(状态，索引){
state.list[index].count-；
if(state.list[index].count=0){
state.list[index].计数=0
返回；
}
},
//清除购物车
clearList(state，arr) {
状态。列表=排列
},
addShopList(州，商店){
state.list.push(商店)
}
},
//使用行动调用突变方法
动作：{
远程列表({
犯罪
},索引){
提交("远程列表",索引)
},
addList({
犯罪
},索引){
提交("添加列表",索引)
},
删除列表({
犯罪
},索引){
提交("删除列表",索引)
},
清除列表({
犯罪
}，arr) {
提交( clearList ，arr)
},
addShopList({commit}，shop){
提交( addShopList ，商店)
}
},
模块：{}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。