使用vuex实现购物车+本地存储

先是列表页数据是用axios请求过来的

<template>
  <div>
     <table>
         <tr>
             <th>商品图片</th>
             <th>商品名称</th>
             <th>商品价格</th>
             <th>操作</th>
         </tr>
         <tr v-for="(e,i) in list" :key="i">
             <td><img :src="e.img" alt=""></td>
             <td>{{e.title}}</td>
             <td>{{e.price}}</td>
             <td><button @click="add(e)">加入购物车</button></td>
         </tr>
     </table>
  </div>
</template>

<script>
import {Toast} from 'vant';

export default {
    data()
    {
        return{
            list:[]
        }
    },
    mounted()
    {
        this.$axios.get("/static/data.json").then((res)=>{
            //console.log(res.data.list)
            this.list=res.data.list;
        })
    },
    methods:{
       add(e)
       {
           Toast.success('加入成功');
           setTimeout(()=>{
               this.$router.push("/cart")
           },1500)
           this.$store.commit("add",e)
       }
    }
}
</script>

<style lang="scss" scoped>
table{
    width: 100%;
    tr{
        width: 25%;
    }
    td{
        text-align: center;
        img{
            display: block;
            margin: 0 auto;
        }
        button{
            border: none;
            background: orangered;
            color: white;
            border-radius: 6px;
            padding: 4px;
        }
    }
}
</style>

当点击加入购物车时，数据放到vuex仓库里面 因为我问是使用vuex编写代码 所以只要数据发生改变 就去vuex里面修改数据在组件中通过this.$store.commit(“方法名”)来调用vuex里面mutations中的方法 mutations可以直接操作state中的数据

cart 购物车页面

<template></template>
  <div>
    <p class="fh" @click="fh()">&lt;</p>
    <table>
         <tr>
             <th>全选/反选 <input type="checkbox" v-model="flag" @change="ch()"></th>
             <th>商品图片</th>
             <th>商品名称</th>
             <th>商品价格</th>
             <th>商品数量</th>
             <th>小计</th>
             <th>操作</th>
         </tr>
         <tr v-for="(e,i) in this.$store.state.list" :key="i">
             <td><input type="checkbox" :value="e.id" v-model="arr"></td>
             <td><img :src="e.img" alt=""></td>
             <td>{{e.title}}</td>
             <td>{{e.price}}</td>
             <td>
               <button @click="jian(i)">-</button>
               {{e.number}}
               <button @click="jia(i)">+</button>
             </td>
             <td>{{e.number*e.price}}</td>
             <td><button @click="del(i)">移除购物车</button></td>
         </tr>
     </table>
     <p>总价为：{{count}}</p>
  </div>
</template>

<script>
export default {
  data()
  {
    return{
      flag:false,
      arr:[]
    }
  },
  methods:{
    fh()
    {
      this.$router.go(-1);
    },
    jian(i)
    {
      this.$store.commit("jian",i)
    },
    jia(i)
    {
      this.$store.commit("jia",i)
    },
    del(i)
    {
      this.$store.commit("delete",i)
    },
    ch()
    {
      this.arr=[];
      if(this.flag)
      {
        this.$store.state.list.forEach((e)=>{
          this.arr.push(e.id)
        })
      }
      else
      {
        this.arr=[]
      }
    }
  },
  watch:{
    arr(val)
    {
      if(val.length==this.$store.state.list.length)
      {
        this.flag=true
      }
      else
      {
        this.flag=false
      }
    }
  },
  computed:{
    count()
    {
      var sum=0;
      for(var i in this.arr)
      {
        for(var j in this.$store.state.list)
        {
          if(this.arr[i]==this.$store.state.list[j].id)
          {
            sum+=this.$store.state.list[j].number*this.$store.state.list[j].price
          }
        }
      }
      return sum;
    }
  }
}
</script>

<style lang="scss" scoped>
table{
    width: 100%;
    tr{
        width: 16.66%;
        font-size: 0.14rem;
    }
    td{
        text-align: center;
        font-size: 0.12rem;
        img{
            display: block;
            margin: 0 auto;
        }
        button{
            border: none;
            background: red;
            color: white;
            border-radius: 6px;
            padding: 4px;
        }
    }
}
.fh{
  width: 100%;
  height: 0.4rem;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
</style>

store仓库

import Vue from "vue";
import vuex from "vuex";
Vue.use(vuex);
var store = new vuex.Store({
    state: {
        //    变量
        list:JSON.parse(localStorage.getItem("list"))||[]
    },
    mutations: {
        //    方法
        add(state,e)
        {
            var obj = {
                id: e.id,
                title: e.title,
                img: e.img,
                price: e.price,
                number: 1
            }
            var index = state.list.findIndex((v) => {
                return e.id == v.id
            })
            if (index == -1) {
                state.list.push(obj)
                localStorage.setItem("list", JSON.stringify(state.list))
            }
            else {
                state.list[index].number++;
                localStorage.setItem("list", JSON.stringify(state.list))
            } 
        },
        jian(state,i)
        {
            state.list[i].number--;
            localStorage.setItem("list", JSON.stringify(state.list))
            if (state.list[i].number<=0)
            {
                if(confirm("是否移除购物车"))
                {
                    state.list.splice(i,1)
                    localStorage.setItem("list", JSON.stringify(state.list))
                }
                else
                {
                    state.list[i].number=1
                    localStorage.setItem("list", JSON.stringify(state.list))
                }
            }
        },
        jia(state, i) {
            state.list[i].number++;
            localStorage.setItem("list", JSON.stringify(state.list))
        },
        delete(state, i) {
            state.list.splice(i,1);
            localStorage.setItem("list", JSON.stringify(state.list))
        }
    },
    getters: {
        //    计算
       
    },
    actions: {
        //    异步
       
    }
})
export default store