最完整最能理解的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

组件代码：

*

购物车

1、elementUi 中计数器的使用，

注意：

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

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

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

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中声明初始值来引用