Vuex实现购物车小功能

Vuex实现购物车功能（附：效果视频），供大家参考，具体内容如下

功能描述：

• 加购
• 删除
• 加减
• 全选反选
• 选中计算总价
• 存储

整体演示效果如下：

首先介绍一下Vuex：

Vuex 实例对象属性 主要有下面5个核心属性:

state : 全局访问的state对象，存放要设置的初始状态名及值（必须要有）

mutations : 里面可以存放改变 state 的初始值的方法 ( 同步操作–必须要有 )

getters: 实时监听state值的变化可对状态进行处理，返回一个新的状态，相当于store的计算属性（不是必须的）

actions : 里面可以存放用来异步触发 mutations 里面的方法的方法 ( 异步操作–不是必须的 )

modules : 存放模块化的数据（不是必须的）

一、主页面Home：

1. <template>
2. <div id="app">
3. <div class="nav-top">
4. <!-- 标签栏-->
5. <van-nav-bar
6. title="商品列表页"
7. left-arrow
8. />
9. </div>
10. <div class="nav-bottom">
11. <!-- 商品卡片-->
12. <van-card
13. v-for="item in goodsList"
14. :price="item.actualPrice"
15. :desc="item.desc"
16. :title="item.dtitle"
17. :thumb="item.mainPic"
18. >
19. <template #num>
20. <van-icon name="shopping-cart-o" color="red" size="24px" @click="add(item)"/>
21. </template>
22. </van-card>
23. </div>
24. </div>
25. </template>
26.  
27. <script>
28.  
29. export default {
30. data() {
31. return {
32. goodsList: [], // 商品列表数据
33. }
34. },
35. // 请求商品列表数据
36. mounted() {
37. // 接口不予展示，有需要请自行下载
38. this.$axios.get('api接口').then(res => {
39. this.goodsList = res.data.data.data
40. // console.log(this.goodsList)
41. })
42. },
43. methods: {
44. // 添加商品 调用vuex中的add方法
45. add(item) {
46. this.$store.commit('add', item)
47. }
48. }
49. }
50. </script>
51.  
52. <style lang="scss" scoped>
53. #app {
54. .nav-top {
55. width: 100%;
56. position: fixed;
57. top: 0;
58. left: 0;
59. z-index: 9;
60. }
61. .nav-bottom {
62. margin-top: 50px;
63. }
64. }
65. </style>

二、购物车页面ShopCart：

1. <template>
2. <div>
3. <!-- 标签栏-->
4. <van-nav-bar
5. title="购物车"
6. left-arrow
7. @click-left="back"
8. />
9. <!-- 购物车box -->
10. <div class="car-box" v-for="(item,index) in list" :key="index">
11. <!-- 左侧复选框布局-->
12. <div class="car-box-left">
13. <van-checkbox v-model="item.ckd"></van-checkbox>
14. </div>
15. <!-- 右侧商品卡片布局-->
16. <div class="car-box-right">
17. <van-swipe-cell>
18. <van-card
19. :price="item.item.actualPrice"
20. :title="item.item.dtitle"
21. :thumb="item.item.mainPic"
22. >
23. <!-- 步进器-->
24. <template #num>
25. <van-stepper v-model="item.num" theme="round" button-size="22" disable-input
26. @change="changeNum(item.num)"/>
27. </template>
28. </van-card>
29. <!-- 右侧滑动删除-->
30. <template #right>
31. <van-button square text="删除" type="danger" class="delete-button" @click="del(index)"/>
32. </template>
33. </van-swipe-cell>
34. </div>
35. </div>
36. <!-- 空状态 没数据显示 有数据隐藏-->
37. <van-empty
38. v-show="$store.state.cartList.length==0"
39. class="custom-image"
40. image="https://img.yzcdn.cn/vant/custom-empty-image.png"
41. description="购物车是空的哟！"
42. />
43. <!-- 商品导航-->
44. <van-submit-bar :price="$store.getters.total*100" button-text="提交订单">
45. <van-checkbox v-model="checkAll">全选</van-checkbox>
46. </van-submit-bar>
47.  
48. </div>
49. </template>
50.  
51. <script>
52. import {mapMutations} from 'vuex'
53. export default {
54. data() {
55. return {
56. list: this.$store.state.cartList, //购物车数据
57. }
58. },
59. computed: {
60. // 计算属性checkAll 和全选按钮双向数据绑定，别人可以控制它 它也可以控制别人
61. // 别人控制它 给他一个值的时候是 get , 它控制别人 给别人设置值的时候 是set
62. // 在set中newVal参数是这个计算属性改变后的值
63. checkAll: { //可以看作一个事件
64. get() {
65. // 判断购物车里商品的长度为0 return false
66. if (this.list.length == 0) {
67. return false
68. }
69. return this.$store.state.cartList.every(item => {
70. return item.ckd == true // 返回结果复选框为true
71. })
72. },
73. set(newVal) {
74. this.$store.commit('ckd', newVal)
75. },
76. }
77. },
78. methods: {
79. // 返回商品列表页
80. back() {
81. this.$router.push({
82. path: '/'
83. })
84. },
85. //方法集合
86. ...mapMutations(['del', 'changeNum',])
87. },
88. }
89. </script>
90.  
91. <style lang="scss" scoped>
92. .goods-card {
93. margin: 0;
94. background-color: white;
95. }
96. .delete-button {
97. height: 100%;
98. }
99. .car-box {
100. width: 100%;
101. margin-bottom: 5px;
102. display: flex;
103. flex-wrap: nowrap;
104. align-items: center;
105. .car-box-left {
106. flex: 1;
107. padding-left: 10px;
108. }
109. .car-box-right {
110. flex: 12;
111. }
112. }
113. </style>

三、Vuex代码：

1. import Vue from 'vue'
2. import Vuex from 'vuex'
3. import VuexPersist from 'vuex-persist'
4.  
5. Vue.use(Vuex);
6.  
7. export default new Vuex.Store({
8. state: {
9. cartList: [], // 购物车数据
10. },
11. mutations: {
12. // 添加商品
13. add(state, item) {
14. // console.log(item)
15. let flag = false;
16. // 加购去重（通过id判断）
17. state.cartList.forEach(i => {
18. if (i.item.id == item.id) {
19. i.num++;
20. flag = true;
21. }
22. })
23. if (flag == false) {
24. state.cartList.push({
25. num: 1, // 添加数量默认为1
26. item, // 添加购物车商品数据
27. ckd: false, // 添加复选框初始化状态为false
28. })
29. }
30. // console.log(state.cartList)
31. },
32. // 删除商品
33. del(state, index) {
34. state.cartList.splice(index, 1)
35. // state.
36. },
37. // 改变数量------加减综合法 ！！！
38. changeNum(state, index) {
39. state.cartList.num = index
40. },
41. // 全选全不选
42. ckd(state, newAll) {
43. state.cartList.forEach(item => {
44. item.ckd = newAll
45. })
46. }
47.  
48. },
49. // 计算 getters
50. getters: {
51. // 总价
52. total(state) {
53. let sum = 0;
54. state.cartList.forEach(item => {
55. // 如果复选框选中 计算总价
56. if (item.ckd == true) {
57. sum += item.item.actualPrice * item.num
58. }
59. })
60. return sum
61. }
62. },
63. actions: {},
64. modules: {},
65. // Vuex存储插件
66. plugins: [
67. new VuexPersist({
68. storage: window.localStorage,
69. }).plugin,
70. ]
71. })

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

原文链接：https://blog.csdn.net/weixin_49519738/article/details/108015450