首先是商品列表页,v-for渲染列表后,点击+号按钮将v-for渲染的内容加入到购物车页面渲染 html部分 <div v-for="(items,indexs) in list" :key="indexs" > <button @click="add(items)">+</button> </div> script方法部分 add(items){ this.$router.push({ name:'shop' }); console.log(items); let obj = {//设置一个对象存储 name: items.name, num: 1,//数量 price: items.price, }; // 将所拿到的数据通过commit传入vuex中操作 this.$store.commit('addshop',obj) } 然后是store里面的index部分,可以判别购物车页面内有没有相同商品如果有的话使该商品数量加一,没有的话购物车新加一件商品 state: { user:JSON.parse(localStorage.getItem('user')) || [ ] }, getters: { }, mutations: { addshop(state,data){ let a=state.user.some((item)=>{ return item.