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 - oldValue
      this.shopId = value._id
      if (!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中声明初始值来引用