Vue项目小米购物车

 1.vue小米购物车用到了 Vuex + localstorage，使用了vue2，创建项目用vue create xiaomi （名字）

 

 1.在Home.vue里面写

<template>
  <div class="home">
    <header>
      <span >首页</span>
    <router-link to="/about" class="span">购物车({
  {total}})</router-link>
    </header>
    <div class="list" v-for="item in list" :key="item.id">
    	<div class="left">
    		<img data-v-3ebe9018="" :src="item.img">
    	</div>
    	<div class="right">
    		<h3 class="title">{
  {item.name}}</h3>
    	<p class="slogan">{
  {item.slogan}}</p>
    	<p class="money">{
  {item.price}}</p>
    	<button class="button" @click="setShippingjiajian(item,'PLUS')">加入购物车</button>
    	</div>
    </div>
  </div>
</template>

<script>
import {mapState,mapGetters} from "vuex"

export default {
  name: 'Home',
  computed:{
    ...mapState(["list"]),
    ...mapGetters(["total"])
  },
  created(){
    this.$store.dispatch("setList")
  },
  methods:{
    setShippingjiajian(item,_type){
      console.log(item)
      this.$store.dispatch("setShippingjiajian",{
               id:item.id,
                name:item.name,
                price:item.price,
                img:item.img,
                slogan:item.slogan,
                // 这个_type是定义加减的
                _type
      })
    }
  }
}
</script>
<style scoped>
	.home{
		width: 100%;
	}
header{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 0.44rem;
  background: #ff6704;
  color: #fff;
  font-size: 0.18rem;
  display: fixed;
}
.span{
  position: absolute;
    right: 0.15rem;
    top: 0.15rem;
    font-size: 0.14rem;
}
.list{
	border-bottom: 1px solid #ddd;
  background: #fff;
	display: flex;
	flex-direction: row;
}
.left img{
	width: 0.94rem;
	height: 0.94rem;
}
.right{
	  flex: 1;
    overflow: hidden;
    height: 1.2rem;
    padding: 0.1rem 0.1rem 0.1rem 0.13rem;
    box-sizing: border-box;
}
.title{
	    color: #333;
    font-size: 0.16rem;
}
.slogan{
	margin-top: 0.05rem;
    color: #999;
    font-size: 0.12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.money{
	margin-top: 0.15rem;
    color: #ff6704;
    font-size: 0.14rem;
}
.button{
    float: right;
    width: 0.8rem;
    height: 0.2rem;
    font-size: 0.12rem;
    border: 1px solid #ff6704;
    color: #ff6704;
    border-radius: 0.02rem;