Vue+ElementUI+Vuex购物车

最完整最能理解的Vuex版本的购物车

购物车是最经典的小案例。

Vuex代码：

import Vue from 'vue'
import Vuex from 'vuex'
import $http from '../request/http'
Vue.use(Vuex)const store =  new Vuex.Store({state:{shopList:[],},mutations:{setShopCarList(state,payload){state.shopList = payload},change_Num(state,payload){console.log(payload);state.shopList = payload}},actions:{//获取商品async getShopList(context){const result =   await $http.shopHttp.getShopcartData()context.commit('setShopCarList',result.data.data)},//改变数量async changeNumAsync(context,payload){const result = await  $http.shopHttp.changeNum(payload)console.log('result',result);if(result.code){context.dispatch('getShopList')}},},getters:{total(state){return state.shopList.filter(item=>item.checked).reduce((prev,cur)=>prev+cur.price*cur.num,0)}}
})
export default store

组件代码：

*<template><div><el-card><el-table :data=" getshopCartList"  border><el-table-column ><template slot-scope="scoped"><el-checkbox v-model="scoped.row.checked"></el-checkbox></template></el-table-column><el-table-column prop="name" label="商品名称" align="center"></el-table-column><el-table-column   label="数量" align="center"><template slot-scope="scope"><el-input-number   :min="1" v-model="scope.row.num" size="mini" @change="(currentValue,oldValue)=>changeShoppingNum(currentValue,oldValue,scope.row)" ></el-input-number></template></el-table-column><el-table-column prop="price" label="价格" align="center"></el-table-column><el-table-column label="小计" align="center" ><template slot-scope="scope">{{ (scope.row.num * scope.row.price).toFixed(2)}}</template>op0-/</el-table-column><el-table-column  label="更新时间" align="center">{{ getshopCartList.updateDate | dateFormat }}</el-table-column><el-table-column  label="创建时间" align="center">{{ getshopCartList.createDate | dateFormat }}</el-table-column></el-table>总价：{{ this.$store.getters.total }}</el-card></div>
</template><script>
import moment from 'moment'
export default {data(){return {shopList:[],num:1,shopId:null}},methods:{changeShoppingNum(currentValue,oldValue,value){let num = currentValue - oldValuethis.shopId = value._idif (!this.shopId) {return;}else {console.log(111);this.$store.dispatch('changeNumAsync',{_id:this.shopId,n:num})}},},computed:{getshopCartList:{get(){return this.$store.state.shopList}}},filters:{dateFormat(val,myFormat,count){return moment(val).format(myFormat || 'YYYY-MM-DD')+(count ? '--'+count :'')}},created(){this.$store.dispatch('getShopList')},watch:{getshopCartList:{deep:true,handler(newVal,oldVal) {console.log(1,newVal, 2,oldVal);}}}
}
</script>

购物车

1、elementUi 中计数器的使用，

<el-input-number setp=‘1’ :min=‘1’ v-model=‘scope.row.num’ size=‘mini’ @change=‘changeShoppingNum(scope.row)’><el-input-number>

注意：

1. el-input-number标签是有默认两个参数：currentValue newValue

2. 但是在需要默认参数的情况下，还需要自定义的参数可以使用回调参数的方法。

<el-input-number

@change="(currentValue,oldValue)=>changeShoppingNum(currentValue,oldValue,scope.row)">

</el-input-number>

2、Vuex的持续化：

使用计算属性。

3、计算数字去掉浮点数:

.toFixed(2)

4、elementui表格的selection放在el-table中，选择时返回的是所选择的整个对象

5、v-model与v-bind的区别:

1. v-model多在表单中使用，在表单元素上创建双向绑定

2. v-model属于语法糖，写法与使用v-bind给输入框绑定value属性值，并添加input事件实现的效果是一样的，

3. v-bind用来绑定数据和属性以及表达式，缩写为'：'。

如果不与input事件，无法实现v-model的双向绑定动能。

4. v-model是以Vue实例中的数据作为数据来源。所以应该在data中声明初始值来引用