vuex购物车

Hi,这个购物车是通过 koa后台读取json数据，前台通过vue,vuex写的前台,小伙伴们主要还是思路要清楚哦,下面先来看看这个小型案例的魔法吧！！！！！

• home.js
  • 主要写的首页渲染,，以及添加购物车的功能点

<template>
    <div class="home">
        <header>首页</header>
        <section>
              <div class="cont">
                    <dl v-for="(item,index) in data" :key="index">
                        <dt><img :src="item.img" alt=""></dt>
                        <dd>
                            <p class="tit"><span>{
   {
   item.title}}</span><button @click="add(item)">来一份</button></p>
                            <p>{
   {
   item.intro}}</p>
                            <p>￥{
   {
   item.price}}元</p>
                        </dd>
                    </dl>
           </div>
        </section>
      <Footer></Footer>
    </div>
</template>
<script>
import Footer from "../components/footer"
import axios from 'axios'
import {
   mapState,mapMutations} from 'vuex'
export default {
   
    props:{
   

    },
    components:{
   
        Footer,
    },
    data(){
   
        return {
   
            data:[]
        }
    },
    computed:{
   
        ...mapState(['adddata']),
        
    },
    methods:{
   
        ...mapMutations(['changedata']),
        add(adddata){
     //添加进入购物车
            this.$router.push("/shopcar")
            this.$store.commit('changedata',adddata)
        }
    },
    created(){
   
        axios.get('/api').then(res => {
   
            this.data=res.data.message
        })       
    }，
}
</script>
<style scoped lang="">
  
    .home{
   
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    header{
   
        height: 44px;
        width: 100%;
        background: salmon;
        line-height: 44px;
        text-align: center;
    }
    section{
   
        flex:1;
        overflow-y:auto;
    }
 
    .cont dl{
   
        width: 100%;
        display: flex;
        padding: 8px;
    }
    dl dt{
   
        width: 110px;
        height: 110px;
        background: skyblue;
        flex-shrink: 0;
    }
    dl dt img{
   
        height:100%;
        width:100%;
    }
    dl dd{
   
        flex: 1;
        padding-left: 10px;
        line-height: 2.2;
    }
    dl dd .tit{
   
        display: flex;
        justify-content: space-between;
        padding-right: 25px;
    }
    dl dd .tit button{
   
        border: none;
        background: none;
        outline: none;
        color: rgb(6, 196, 202);
        font-size:16px;
    }
</style>

• shopcar.js
• 主要的功能是添加订单，以及其他的传参

<template>
    <div class="shopcar">
        <header>购物车</header>
       <section>
            <