vue在做購(gòu)物車的時(shí)候遇到一個(gè)問(wèn)題，求解？

感謝各位給出的思路，已經(jīng)實(shí)現(xiàn)在vuex里邊做的添加數(shù)量

代碼已更新，給不明白的同學(xué)參考，自己再嘗試一下組件來(lái)實(shí)現(xiàn)不用vuex。

問(wèn)題描述

問(wèn)題出現(xiàn)的環(huán)境背景及自己嘗試過(guò)哪些方法

就是單個(gè)商品增加數(shù)量的時(shí)候，所有商品都跟著增加，如何區(qū)分開，求解？

相關(guān)代碼

export default {
    state: {
      listData:[
        {
          id:"122678687367670",
          imgUrl:"https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=a45c64e436292df588c3aa158c335ce2/9345d688d43f87949470e9e5de1b0ef41ad53a69.jpg",
          title:"標(biāo)題：我是標(biāo)題",
          info:"描述：我是描述",
          price:10,
          num:0
        },
        {
          id:"122678687367671",
          imgUrl:"https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=a45c64e436292df588c3aa158c335ce2/9345d688d43f87949470e9e5de1b0ef41ad53a69.jpg",
          title:"標(biāo)題：我是標(biāo)題",
          info:"描述：我是描述",
          price:20,
          num:0
        },
        {
          id:"122678687367672",
          imgUrl:"https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=a45c64e436292df588c3aa158c335ce2/9345d688d43f87949470e9e5de1b0ef41ad53a69.jpg",
          title:"標(biāo)題：我是標(biāo)題",
          info:"描述：我是描述",
          price:9.9,
          num:0
        }
       ]
  },
  getters:{
    showTotal(state){
      let datas = state.listData;
      let totals = 0;
      datas.forEach(v => {
        totals += v.num;
      });
      return totals;
    },
    showPrice(state){
      let datas = state.listData;
      let prices = 0;
      datas.forEach(v => {
        prices += v.num * v.price;
      });
      return prices;
      console.log(price);
    }
  },
  mutations: {
      add:(state,index) => {
      state.listData[index].num++;
      // state.totalAll = (state.listData[index].price * state.listData[index].num).toFixed(2);
      // state.listData[index].total = (state.listData[index].price * state.listData[index].num).toFixed(2);
    },
    sub:(state,index) => {
      if(state.listData[index].num > 0){
        state.listData[index].num--;
        // state.listData[index].total = (state.listData[index].price * state.listData[index].num).toFixed(2);
      }else{
        alert("我是有底線的");
      }
      
    }
  },
  actions:{
      jia(context,index){
          context.commit('add',index);
      },
      jian(context,index){
          context.commit('sub',index);
      }
  }
}

<template>
  <div class="info">
    <left @indexNb="indexNbs"></left>
    <div class="info-mean">
      <div class="item" v-show="nowIndex===0">
        <ul>
          <li v-for="(list,index) in listDatas" :key="list.id">
          <img :src="list.imgUrl">
            <h1>{{list.title}}</h1>
            <p>{{list.info}}</p>
            <em>單價(jià)：{{list.price}}</em>
            <span @click="$store.dispatch('jian',index)">-</span>
            <input type="text" name="" v-model="list.num" readonly="">
            <span @click="$store.dispatch('jia',index)">+</span>
          </li>
        </ul>
      </div>
      <div class="item" v-show="nowIndex===1">2</div>
      <div class="item" v-show="nowIndex===2">3</div>
    </div>
  </div>
</template>

<script>
import left from '@/components/left'
export default {
  name: 'info',
  components:{
    left
  },
  data:function(){
    return {
     nowIndex:0,
     listDatas:[]
    }
  },
  mounted:function(){
    this.listDatas = this.$store.state.cart.listData
  },
  methods:{
    indexNbs:function(index){
      this.nowIndex = index;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .info{
    position: absolute;
    top:50px;
    left:0;
    right:0;
  }
  .info-mean{
    margin-left:60px;
    padding:20px;
  }
  .item ul li{
    border-bottom: dotted 1px #dedede;
    padding-bottom:10px;
  }
  .item ul li img{
    width:100%;
    height:80px;
  }
  .item ul li h1{
    font-size:16px;
    font-weight:normal;
    color:#333;
  }
  .item ul li p{
    font-size:14px;
    color:#999;
  }
  .item ul li em{
    display: block;
    font-style: normal;
    color:#f60;
    font-size:18px;
  }
  .item ul li span{
    width:22px;
    height:22px;
    text-align: center;
    line-height: 22px;
    display: inline-block;
    background: #ccc;
  }
  .item ul li input{
    width:30px;
    border:solid 1px #dedede;
    height:20px;
    line-height: 20px;
    vertical-align: middle;
    margin-top:-1px;
    text-align: center;
  }
</style>