用vuex实现购物车功能

最新推荐文章于 2024-06-06 10:02:37 发布
最新推荐文章于 2024-06-06 10:02:37 发布
阅读量272 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/cmy1996/p/9148126.html
版权

效果图

效果图

 

　　　　　　展示目录结构

                        

 

      • product组件（纯静态代码）

      •  

        • cart组件（纯静态代码）

         

        • info组件（纯静态代码）

          • 完成以上的三个组件，现在要开始调用这些组件，在App.vue中调用

         　　

        　　

        如果你的姿势正确的话，会出现这个画面 

      • 解释这里为什么要分开组件的编写，vuex是就是存储的数据的中心的，每个组件都是拿到数据，这样才能vuex的价值

      • store/index.js
        • modules/cart.js
          • 搭建问vuex的我们现在要使用vuex的，在main.js中使用

          • 到这步，vuex的模板基本，但是没有效果怎么办，现在开始修改的product.vue中data中的shoplist剪切到cart.js中的state中， 
            这里解释一下，state和组件中大data作用是一样，都是的设置假数据的和变量，查看文档的state

            修改cart.js的state

          • 既然state和data的作用是一样的，那么我们在组件中拿到state中的shop_list的数据呢？ 

              • 这是需要getters的处理哦

          • 组件中怎么拿到这个shoplist数据呢？查看文档getters 中的mapGetters辅助函数的方法

            这个数据是从product组件剪切走的，现在还回去，是这样秀的

          • 以上 商品列表功能完成

          • 接下来是添加商品进购物车功能
            • 现在编写addToCart的方法，我们会到cart,js 中的action里面去，查看文档action的介绍，需要commit来分发actions

            •  

            • 既然我们分发出来了一个add的方法，我们在mutations中接受,mutation中可以直接拿到state里面所有的数据，因为这里的added是自己定一个已选商品的数组，我组件中点击时传递一个对象过来的，find这个对象，但是这里有2种情况，一个added为空或者有数据，但是不是当前点击的对象的数据，当为空时，我们人为个这个对象push一个id和num为1的值，有点击就是当前这个对象的时候，我们执行++的操作，这里打印一下的值，或者从vue-tool的种查看的，vuex的一个浏览器的查看，自己百度去安装，查看数据比较方便
              • 这里vuex中action的addToCart方法写好了，如何product.vue中的addToCart方法对应上去呢？
              • 这里文档中有介绍，有个mapActions的辅助函数， 
                • 这样我们就是action和组件中方法关联起来了,
                • 现在增加商品的click事件解决，但是我们要把added给抛出，但是前提要对added这个数组进行数据转化
                • 修改getter中方法，添加一条

                • 这里我们需要将cartProducts这个抛出去，和shoplist的方法一样的，只不过这个是在cart.vue中操作， 

                • 　　

                  • 现在我们开始计算总价，总数量 和 清空购物车功能，在getter中操作，
                  • 计算总价

                  •  

                  • 清空购物车
                    • 清空购物车的操作，原理就是added的数组置为空数组就可以的，
                      • 将actions中clearAllCart和info.vue中的组件联系到一起，前面已经介绍过了。cart.js中的actions

                    •  

                      • mutations接受

                      •  

                        • info.vue中调用clearAllCart方法，

                         

                      • 还有一个小功能就是已选商品中的有个删除的按钮，实现这个功能，cart.vue组件中修改

                      •  

                       

                      • 将actions中delProduct和car.vue中的组件联系到一起，前面已经介绍过了。cart.js中的actions
                        • mutations接受
                          • car.vue中调用delProduct方法，

                          •  

转载于:https://www.cnblogs.com/cmy1996/p/9148126.html

weixin_30532973
关注
用vuex的方法实现购物车业务
zyq51的博客
07-13 883
一、 购物车的实现原理： 注意：在写购物车之前，我们需要知道vuex里的方法如何使用，若是不太清除方法的使用，可以看我之前的文章，其中有一章是介绍vuex的方法的使用和调用的！ 1，首先，我们需要一个json数据，自己写或者找一个就可以。 2. 然后把数据渲染到页面，即为商品列表，在每一个商品后面加上一个加号，代表着点击添加商品就将该商品添加到购物车。 3. 其次，就是购物车内的操作，在此之前需要把数据存储到本地，好在购物车页面渲染点击获取的数据。 4. 最后，就是对数据进行全选，单选，加加减减及总价的操作
【Vue基础】Vuex实现购物车功能
Milk~每天分享一点点，技术进步一点点
07-25 1053
Vuex实现购物车功能 话不多说，先看效果： 购物车初始效果： 反选： 单选： 自定义购买数量，价格自动更改： 删除选中商品功能： 核心代码演示： import { Toast } from 'vant' import { Dialog } from 'vant' var state = { //购物车，涉及到刷新数据丢失，存在本地 car: localStorage["car"] ? JSON.parse(localStorage["car"]) : [], //总价
vuex实现购物车功能
10-15
主要为大家详细介绍了vuex实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vuex——做简单的购物车功能
weixin_30919919的博客
04-04 209
购物车组件 <template> <div> <h1>vuex-shopCart</h1> <div class="shop-listbox"> <shop-list/> </div> <h2&g...
vuex实现购物车的增加减少移除
01-19
本文实例为大家分享了vuex实现购物车增加减少移除的具体代码，供大家参考，具体内容如下 1.store.js（公共的仓库） import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({...
Vuex实现购物车小功能
11-19
Vuex实现购物车功能（附：效果视频），供大家参考，具体内容如下
vuex实现购物车
kgcwuli的博客
07-08 424
数据：index.js import Vue from "vue"; import Vuex from 'vuex'; Vue.use(Vuex); const state = { shop_list: [{ id: 11, name: '鱼香肉丝', price: 12, }, { id: 22, name: '宫保鸡丁', price:...
vuex购物车
10-08
这是用vuex写的简单的购物车，有加入购物车，购物车物品增加减少，物品删除，总价等功能。安装步骤：安装依赖，安装路由依赖，安装vuex，还要引入mintui。
Vuex实现购物车功能
杨爽
08-15 1641
Vuex实现购物车功能（附：效果视频） 功能描述： 加购 删除 加减 全选反选 选中计算总价 存储 整体演示效果如下： 首先介绍一下Vuex: Vuex 实例对象属性 主要有下面5个核心属性: state : 全局访问的state对象，存放要设置的初始状态名及值（必须要有） mutations : 里面可以存放改变 state 的初始值的方法 ( 同步操作–必须要有 ) getters: 实时监听state值的变化可对状态进行处理，返回一个新的状态，相当于store的计算属性（不是必须的
vue之vuex实现购物车功能
前端技术栈
05-08 5338
vuex购物车 vuex实现购物车的增删改查，单选，多选，反选，全选。 动态价格计算，数量统计。 module模块化，namespaced命名空间 state, actions, mutations,getters主要用法 辅助函数，方法调用。
使用Vuex实现购物车
最新发布
水寿十八公专栏
06-06 675
使用时，需要将商品列表组件Product.vue和购物车列表组件Cart.vue在App.vue中引入，并在Vuex的store文件夹下的cart.js中定义好商品数据 all_products和已添加到购物车的商品数据selected，然后将该模块放入index.js文件的modules对象中，将数据通过getters导出，将方法通过actions和mutations导出。当进行一些小项目开发时，涉及组件传值时，或者项目非常小，组件间共享状态不多的情况下，此时可以使用简单的store模式或者其它方式。
使用VueX实现购物车功能
XYXYYDD的博客
09-10 963
假设你已经完成相关html css 布局 1.给加减按键绑定点击事件，传递店铺Id，商品id 商品详情 ，加减数以及店铺名 2.点击事件派发一个action 名为 changeCartItemInfo,并且传递参数 3.mutations感知到提交的changeCartItemInfo改变，执行changeCartItemInfo方法，在这个方法中，接收两个参数，vue中的state和外面传递进来的payload,定义一个shopinfo等于vuex中传递进来的店铺id,如果不存在则.
vuex实现购物车页面
xyphf的博客
12-02 898
main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' impo...
Vuex 状态管理模式实现购物车功能
qq_49247218的博客
06-03 276
1.安装 <script src="/path/to/vue.js"></script> <script src="/path/to/vuex.js"></script>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值