vuex实现购物车逻辑

vuex–目录

步骤1：在store.js中

//导入vuex
import Vuex from 'vuex'
// 导入Vue
import Vue from 'vue';
Vue.use(Vuex)

//实例化仓库对象
const store = new Vuex.Store({
     //状态
     state: {
      //短路运算
      carData: JSON.parse(window.localStorage.getItem('cacheData')) || {}
    },
    //数据改变方法
    mutations: {
      add2Car(state, obj) {
        console.log(obj)
        if (state.carData[obj.goodId] != undefined) {
          //商品存在
          state.carData[obj.goodId] += obj.goodNum
        } else {
          //商品不存在
          //state.carData[obj.goodId] = obj.goodNum
          // 如果是动态增加的属性 必须使用Vue.set才可以跟踪数据改变
          //参数1:对象  参数2:属性名  参数3:属性值
          Vue.set(state.carData, obj.goodId, obj.goodNum)
        }
        console.log(state)
      },
      // 增加一个修改数据的方法
      updateCartData(state, obj) {
        // //console.log(obj);
        // 接收到数据直接赋值 
        state.carData = obj
      },
    },
    //vuex的计算属性
    getters: {
      //通过state获取内部的数据,计算并返回
      totalCount(state) {
        let num = 0
        for (const key in state.carData) {
          num += state.carData[key]
        }
        return num
      }
    }
  })
  export default store

步骤二：在商品详情页里

//点击加入购物车的方法
    addCar() {
      //触发方法
      this.$store.commit('add2Car',{
        goodId:this.$route.params.goodsid,
        goodNum:this.num
      })
    }

//页面渲染数据
<router-link to="/goodscar">
  <i class="iconfont icon-cart"></i>购物车(
        <span id="shoppingCartCount">
           <!-- 绑定数据的时候可以不写this -->
          <span>{{$store.getters.totalCount}}</span>
      </span>)
</router-link>

步骤三：用户登录购物车数据的渲染

created() {
    //生成数据id1,id2,id3
    let ids = "";
    //通过vuex获取数据
    for (const key in this.$store.state.carData) {
      ids += key;
      ids += ",";
    }
    ids = ids.slice(0, ids.length - 1);
    console.log(ids);
    this.$axios.get(`site/comment/getshopcargoods/${ids}`).then(backData => {
      console.log(backData);
      backData.data.message.forEach(v => {
        //通过id获取购买的数量
        v.buycount = this.$store.state.carData[v.id];
        //增加一个被选中的字段
        v.isSelected = true;
      });
      this.goodsList = backData.data.message;
    });
  },
  // 计算属性
  computed: {
    // 选中的个数
    selectedCount() {
      let num = 0;
      this.goodsList.forEach(v => {
        // 如果被选中
        if (v.isSelected == true) {
          // 累加上购买个数
          num += v.buycount;
        }
      });
      return num;
    },
    // 选中的总金额
    selectedPrice() {
      let price = 0;
      this.goodsList.forEach(v => {
        // 如果被选中
        if (v.isSelected == true) {
          // 累加上购买个数
          price += v.buycount * v.sell_price;
        }
      });
      return price;
    },
    // 选中商品的id
    selectedIds() {
      let ids = "";
      this.goodsList.forEach(v => {
        if (v.isSelected == true) {
          ids += v.id;
          ids += ",";
        }
      });
      // 去掉最后的,
      ids = ids.slice(0, ids.length - 1);
      // 返回ids
      return ids;
    }
  },
  watch: {
    goodsList: {
      handler: function(val, oldVal) {
        let obj = {};
        val.forEach(v => {
          // 动态的增加属性
          obj[v.id] = v.buycount;
        });
        // 同步修改 Vuex中的数据
        this.$store.commit("updateCartData", obj);
      },
      deep: true
    }
  }