vuex实现简单的购物车案例

使用Vuex实现简单的购物车案例
1、Vuex一般是由state、actions、mutations、getters、modules这几部分构成
2、我们需要首先在state中定义一个cars空数组
3、我们目前是通过localStorage本地存储来存储数据
4、在actions文件中，我们需要添加一个加入购物车的方法（如以下代码）
export default {
addGoodInCar(store,goodInfo){
let cars = getGoodCar();
let isHas = cars.some((item)=> {
//这里是判断数组中的Id和你传过来的Id是否相等，如果相等添加的就为同一个商品，则num值++
if(item.id == goodInfo.id) {
item.num ++;
return true
}
})
if(!isHas) { //如果不相等商品的num值为1，并且把商品添加到该数组中
goodInfo.num = 1;
cars.push(goodInfo)
}
//这里我们要通知后台进行更改数据了，因为我们目前没有后台，我们是通过localStorage来存储数据的
localStorage.cars = JSON.stringify(cars);
//在Vuex管理中，我们只能通过在actions中通过commit提交mutation来同步的更改我们的数据
store.commit(SYNC_UPDATE，cars)
}

function getGoodCar{
return JSON.parse(localStorage.cars?localStorage.cars:’[]’);
}

5、在mutations中我们需要定义一个同步改变数据的方法（如以下代码)
import {SYNC_UPDATE} from “./const”
export default {
SYNC_UPDATE(state,newCars) {
state.cars = newCars;
}
}
6、这里要说明的是目前const.js文件里的内容为以下代码
const SYNC_UPDATE from “SYNC_UPDATE”
export {SYNC_UPDATE}

7、在组件里可以通过在vux中引入mapActions需要注意的时该方法需要写在methods方法中（如以下代码）

<template>
  <div class="list">
    <van-cell
      v-for="good in goods"
      :key="good.CommodityCode"
      :title="good.CommodityName"
      :label="'￥' + good.OriginalPrice"
    >
      <van-button type="danger" @click="addGoodInCar(good)" size="small"
        >购物</van-button
      >
    </van-cell>
  </div>
</template>

import {mapActions} from "vuex"
methods:{
	...mapActions(["addGoodInCar"])
}

然后直接通过@click调用该方法即可（如以上代码示例）

8、当我们添加完购物列表中的商品时刷新页面之后我们会发现之前存储在cars中的数据给清空了，为了解决这个问题我们可以采用当进入这个页面的时候初始化以下购物车里面的数据（如以下代码）
export default {
initCar(store) {
let cars = getGoodCar();
store.commit(SYNC_UPDATE, cars)
},
addGoodInCar(store,goodInfo){
let cars = getGoodCar();
let isHas = cars.some((item)=> {
//这里是判断数组中的Id和你传过来的Id是否相等，如果相等添加的就为同一个商品，则num值++
if(item.id == goodInfo.id) {
item.num ++;
return true
}
})
if(!isHas) { //如果不相等商品的num值为1，并且把商品添加到该数组中
goodInfo.num = 1;
cars.push(goodInfo)
}
//这里我们要通知后台进行更改数据了，因为我们目前没有后台，我们是通过localStorage来存储数据的
localStorage.cars = JSON.stringify(cars);
//在Vuex管理中，我们只能通过在actions中通过commit提交mutation来同步的更改我们的数据
store.commit(SYNC_UPDATE, cars)
}

function getGoodCar{
return JSON.parse(localStorage.cars?localStorage.cars:’[]’);
}

9、在组件里我们可以在beforeCreate或者created里面执行这个this.$store.dispatch("initCar"),前提你要这样写首先要在main.js原型上绑定store如Vue.prototype.$store = store即可

10现在state中的cars数组就有数据了，我们可以直接在购物车组件里渲染出数据，为了优化购物车我们可以给商品添加加号和减号按钮来添加购物车商品和减少购物车商品，并且可以计算购物车商品的总价（如以下代码）

<template>
  <div class="car">
    <van-cell
      v-for="good in cars"
      :key="good.CommodityCode"
      :title="good.CommodityName"
      :label="'￥' + good.OriginalPrice + '*' + good.num"
    >
      <van-button type="danger" @click="addGoodInCar(good)">+</van-button>
      <van-button type="danger" @click="reduceGoodInCar(good)">-</van-button>
    </van-cell>
    <div>
      <p>总价：{{computeToTal.price}}</p>
       <p>数量：{{computeToTal.num}}</p>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  name: "car",
  computed: {
    ...mapState({
      cars: (state) => state.myCart.cars,
    }),
    ...mapGetters(["computeToTal"]),
  },
  methods: {
    ...mapActions(["addGoodInCar", "reduceGoodInCar"]),
  },
};
</script>

11、在actions中我们需要写一个reduceGoodInCar这个方法（如以下代码）
export default {
initCar(store) {
let cars = getGoodCar();
store.commit(SYNC_UPDATE, cars)
},
addGoodInCar(store,goodInfo){
let cars = getGoodCar();
let isHas = cars.some((item)=> {
//这里是判断数组中的Id和你传过来的Id是否相等，如果相等添加的就为同一个商品，则num值++
if(item.id == goodInfo.id) {
item.num ++;
return true
}
})
if(!isHas) { //如果不相等商品的num值为1，并且把商品添加到该数组中
goodInfo.num = 1;
cars.push(goodInfo)
}
//这里我们要通知后台进行更改数据了，因为我们目前没有后台，我们是通过localStorage来存储数据的
localStorage.cars = JSON.stringify(cars);
//在Vuex管理中，我们只能通过在actions中通过commit提交mutation来同步的更改我们的数据
store.commit(SYNC_UPDATE, cars)
}，
reduceGoodInCar(store,goodInfo) {
let cars = getGoodInCar();
cars = cars.filter(item=> {
if(item.id == goodInfo.id) { ///这里是判断数组中的Id和你传过来的Id是否相等，如果相等删除的就为同一个商品，则num值–，注意这里需要判断以下当item.num <=0时，直接删除该商品
if(item.num <=0) {
return false
}
return true
}
//这里需要知道的是，cars.filter方法时当return true时，代表保留原有的商品，当return false时代表过滤掉不需要的商品,并且car.filter会返回一个新数组
})
}
}

function getGoodCar{
return JSON.parse(localStorage.cars?localStorage.cars:’[]’);
}

12、当我们计算商品的总价时，我们是根据商品的价格和商品的数量来派发一个新状态，这时就需要用到getters（如以下代码）
export default {
computeToTal(state) {
let cars = state.cars;
let total = {price:0,num:0}
cars.forEach(item=>{
total.price += item.price
total.num += item.num
})
//这里做一下优化如计算的总价格保留两位小数
total.price = total.price.toFixed(2) //这个toFixed()方法会保留几位小数后，自动采取四舍五入的形式
return total
}
}

13、目前我们的简单购物车案例就已经实现完成了，感兴趣的朋友支持一下吧，谢谢！