用vuex实现购物车功能

效果图

　　　　　　展示目录结构

• • • 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方法，
                        •