Thank you for your ideas. The number of additions made in vuex

code has been updated to give reference to students who do not understand, and try the component again to achieve without vuex.

the environmental background of the problems and what methods you have tried

that is, when the quantity of a single commodity increases, all goods increase with it. How to distinguish and solve?

related codes

export default {
    state: {
      listData:[
        {
          id:"122678687367670",
          imgUrl:"https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=a45c64e436292df588c3aa158c335ce2/9345d688d43f87949470e9e5de1b0ef41ad53a69.jpg",
          title:":",
          info:":",
          price:10,
          num:0
        },
        {
          id:"122678687367671",
          imgUrl:"https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=a45c64e436292df588c3aa158c335ce2/9345d688d43f87949470e9e5de1b0ef41ad53a69.jpg",
          title:":",
          info:":",
          price:20,
          num:0
        },
        {
          id:"122678687367672",
          imgUrl:"https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=a45c64e436292df588c3aa158c335ce2/9345d688d43f87949470e9e5de1b0ef41ad53a69.jpg",
          title:":",
          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].numPP;
      // 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>
            
{{list.info}}
            <em>:{{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 -sharpdedede;
    padding-bottom:10px;
  }
  .item ul li img{
    width:100%;
    height:80px;
  }
  .item ul li h1{
    font-size:16px;
    font-weight:normal;
    color:-sharp333;
  }
  .item ul li p{
    font-size:14px;
    color:-sharp999;
  }
  .item ul li em{
    display: block;
    font-style: normal;
    color:-sharpf60;
    font-size:18px;
  }
  .item ul li span{
    width:22px;
    height:22px;
    text-align: center;
    line-height: 22px;
    display: inline-block;
    background: -sharpccc;
  }
  .item ul li input{
    width:30px;
    border:solid 1px -sharpdedede;
    height:20px;
    line-height: 20px;
    vertical-align: middle;
    margin-top:-1px;
    text-align: center;
  }
</style>