本文實例為大家分享了vuex實現購物車功能的具體代碼，供大家參考，具體內容如下
先看效果:
代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<template> <div class="Home"> <h1>vuex購物車案例</h1> <add-from></add-from> <shop-cart></shop-cart> </div></template><script>import AddFrom from './Add.vue'import ShopCart from './ShopCart.vue'// @ is an alias to /src// import HelloWorld from '@/components/HelloWorld.vue'export default { name: 'Home', components: { AddFrom, ShopCart },};</script><style>table { width: 800px; margin: 0 auto; border: 1px solid #ccc; border-spacing: 0;}tbody th,tbody td { border: 1px solid #ccc; text-align: center;}h1{ text-align: center;}.add{ width: 800px; margin: 0 auto;}</style> |
父組件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<template> <div class="add"> <div class="from-group"> <label for="">商品編號</label> <input type="text" v-model="shop.id" placeholder="請輸入商品編號"> </div> <div class="from-group"> <label for="">商品名稱</label> <input type="text" v-model="shop.name" placeholder="請輸入商品名稱"> </div> <div class="from-group"> <label for="">商品價格</label> <input type="text" v-model="shop.price" placeholder="請輸入商品價格"> </div> <div class="from-group"> <label for="">商品數量</label> <input type="text" v-model="shop.count" placeholder="請輸入商品數量"> </div> <div class="from-group"> <button @click="add">添加商品</button> </div> </div></template><script>export default { name: 'add', data() { return { shop:{} }; }, methods:{ add(){ this.$store.dispatch("addShopList",this.shop) this.shop = { id:"", name:"", price:"", count:"" } } }};</script><style scoped> .add{ width: 800px; text-align: center; }</style> |
```bash
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<template> <div class="Shop-Cart"> <table> <thead border> <tr> <th>商品編號</th> <th>商品名稱</th> <th>商品價格</th> <th>商品數量</th> <th>小計</th> <th>操作</th> </tr> </thead> <tbody v-if="shop.length > 0"> <tr v-for="(i, e) in shop" :key="e"> <td>{{ i.id }}</td> <td>{{ i.name }}</td> <td>{{ i.price }}</td> <td> <button @click="add(e)">+</button> <input type="text" v-model="i.count" /> <button @click="delet(e)">-</button> </td> <td>￥{{ i.price * i.count }}</td> <td><button @click="del(e)">刪除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan="6" align="right">總計：{{ total }}</td> <button @click="clear">清除購物車</button> </tr> </tfoot> </table> </div></template><script>export default { name: 'Shop-Cart', components: {}, data() { return {}; }, computed: { shop() { return this.$store.getters.getlist; }, total() { return this.$store.getters.getShopTotal; } }, methods: { del(e) { // this.$store.dispatch() this.$store.dispatch('remoteList', e); }, add(e) { this.$store.dispatch('addList', e); }, delet(e) { this.$store.dispatch('deleteList', e); }, clear() { this.$store.dispatch('clearList', []); } }};</script> |
vuex組件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { list: [{ id: 1, name: "哇哈哈", price: 3, count: 0 }, { id: 2, name: "哇哈", price: 3, count: 0 } ] }, getters: { //獲取購物車數據 getlist(state) { return state.list }, //商品的總價 getShopTotal(state,index) { let result = 0; state.list.forEach((item, index) => { result += item.price * item.count }) return result }, }, mutations: { //刪除購物車單個數據 remoteList(state,index) { state.list.splice(index, 1); console.log("aaa",state) }, //商品數量增加 addList(state, index) { state.list[index].count++; }, //商品數量減少 deleteList(state, index) { state.list[index].count--; if(state.list[index].count<=0){ state.list[index].count = 0 return ; } }, //清除購物車 clearList(state, arr) { state.list = arr }, addShopList(state,shop){ state.list.push(shop) } }, //使用actions調用mutations方法 actions: { remoteList({ commit }, index) { commit("remoteList", index) }, addList({ commit }, index) { commit("addList", index) }, deleteList({ commit }, index) { commit("deleteList", index) }, clearList({ commit }, arr) { commit("clearList", arr) }, addShopList({commit},shop){ commit("addShopList",shop) } }, modules: {}}) |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/dongdongaa0/article/details/111304266
