vuex购物车 - 爱码网

仓库地址：https://github.com/dubuxunqi/vuexShoppingCar

先看下效果图
vuex购物车

看下目录结构：
vuex购物车

安装vue脚手架，还有布局就不在说了，主要讲vuex的用法

1.安装vuex依赖 npm install vuex --save

2.先是在src路径下创建一个vuex文件夹store，里面创建一个入口文件index.js。引入VUE、VUEX两大神器，然后在main.js里面引入一下，目的是让vuex在整个项目中都能访问到
index.js里面的代码:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import mutations from './mutations'   
import actions from './actions'  
import state from './states'
import getters from './getters'
export default new Vuex.Store({
    mutations,
    actions,
    state,
    getters
})

main.js的代码：

import store from './store/'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

3.在store文件夹中创建states.js,state是保存数据用的

export default{
    arr:[]
}

4.在store文件夹中创建mutations.js，即mutation对象，它是更改store状态的唯一方法。点击列表页面的加入购物车，修改state对象里面的数据，并且修改的数据要提交到后台，但是mutation只能进行同步操作，所以得用action对象（后面介绍）

import state from './states'
export default{
    addGoods(state,info){ 				//加入购物车的方法 参数state是state对象，info是addGoods调用时的参数，即传入加入购物车物品的对象
        let isOwn = state.arr.some(function(item){
            if(item.id == info.id){
                item.num++;
                return true;
            }else{
                return false;
            }
        });
        
        if(!isOwn){
          state.arr.push({id:info.id,name:info.name,price:info.price,num:1});
        }  
    },
    addNum(state,index){          //购物车中增加物品数量 
        state.arr[index].num++;
    },
    reduceNum(state,index){       //购物车中减少物品数量
        if(state.arr[index].num == 0){
            state.arr.splice(index,1);
        }else{
           state.arr[index].num--; 
        }
    },
    deleteGoods(state,index){     //购物车中删除物品
        state.arr.splice(index,1);
    }
}

5.在store文件夹中创建actions.js，即action对象，Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。（下面的例子不涉及异步操作，如果想要测试，自己加上setimeout测试下）

export default{
        addGoods({commit},params){     //params对应mutation对象中参数info
            commit('addGoods',params);
        },
        addNum({commit},params){
            commit('addNum',params);
        },
        reduceNum({commit},params){
            commit('reduceNum',params);
        },
        deleteGoods({commit},params){
            commit('deleteGoods',params);
        }
    }

6.在store文件夹中创建getters.js，即getter对象，getter对象可以处理state的数据，或是过滤

import state from './states'
export default{
    totalMoney(state){
        let money = 0;   // 计算总价
        for(let i =0;i<state.arr.length;i++){
            money += parseInt(state.arr[i].price.substring(1))*state.arr[i].num;
        }
        return money;
    }
}

7.list.vue里面的代码
vuex购物车
js代码

 import {mapActions} from 'vuex'    //引入action对象
    export default{
        name:"List",
        data(){
            return {
                arr:[
                    {id:22,name:"小炒肉",price:"￥25.00"},
                    {id:13,name:"皮蛋瘦肉粥",price:"￥13.00"},
                    {id:36,name:"凉皮",price:"￥15.00"},
                    {id:19,name:"肉夹馍",price:"￥10.00"},
                    {id:28,name:"干锅鸭头",price:"￥205.00"},
                ]
            }
        },
        methods:{
            ...mapActions(['addGoods']) //使用action对象中addGoods方法

        }
    }

8.car.vue代码
js代码

import {mapState,mapActions,mapGetters} from 'vuex'     //引入state，action，getter对象
    export default{
        name:"Car",
        data(){
            return {
            }
        },
        methods:{
            ...mapActions(['addNum','reduceNum','deleteGoods'])
        },
        computed:{
           ...mapGetters(['totalMoney']),//在计算属性里面使用getter和state对象
           ...mapState(['arr'])
        }
    }

如果有什么问题，尽管拍砖，虚心接受，有什么问题也可以给我留言