Vue购物车（购物车简易版）

首先了解一下效果实现流程

       1. 首先我们在views中创建两个vue项目，(商品页和购物车页)        

        2.在我们商品页拿到我们的数据进行渲染，给每个商品加入一个点击事件，当点击加入购物车页

        3.在购物车页来计算商品的综合加钱，单个的加减

功能的实现

商品页实现流程

        我们通过本地储存localStorage存储到本地，然后在我们Vue项目中的store中创建一个空的对象，来放置我们存在本地的数据，我们在商品页拿取我们vuex中回去的数据进行渲染，我们在vuex中在创建一个我们加入购物车春芳数据的地方，当我们点击商品页的加入购物车，添加进去

 商品页代码：

<template>
    <ul class="goods-list">
        <li class="goods-item" v-for="item in goodsData" :key="item.id">
          <div class="goods-img">
              <img :src="item.img" alt="">
          </div>
          <div class="goods-info">
              <h1 class="goods-title">{
  {item.name}}</h1>
              <p class="goods-price">{
  {item.slogan}}</p>
              <p class="des">{
  {item.price}}</p>
              <p class="save">
                  <button @click="cartshop(item,'ADD')">加入购物</button>
              </p>
          </div>
        </li>
      </ul>
</template>

<script>
import {mapState} from "vuex"
export default {
//获取vuex中数据进行渲染
    computed:{
        ...mapState(['goodsData'])
    },
    created() {
        this.$store.dispatch('setGoods')
    },
//添加数据到购物车页
    methods: {
        cartshop(item,_type){
            this.$store.dispatch('setCart',{
                id:item.id,
                img:item.img,
                name:item.name,
                slogan:item.slogan,
                price:item.price,
                _type
            })
            console.log(this.$store.state.cartData)
            this.$store.dispatch('setTotal')
        }
    },
}
</script>

<style lang="scss" scoped>
   .goods-item{
       position: relative;
        display: flex;
        flex-direction: row;