vuex的购物车效果 index.js

import Vue from 'vue';
import Vuex, {
  Store
} from 'vuex';
import { stat } from 'fs';

Vue.use(Vuex);
let store = new Store({
  state:{
      list: [
        {   id:1,
            count: 0,
            price: 10,
            goodsname: '橘子'
        },
        {   id:2,
            count: 0,
            price:8,
            goodsname: '苹果'
        },
        {   id:3,
            count: 0,
            price:4,
            goodsname: '香蕉'
        },
        {   id:4,
            count: 0,
            price:4,
            goodsname: '桃子'
        }
      ],
      sum:0,
      price:0

  },
  getters: {
    sellPrice(state) {
      return (ind)=>{   //getters 传参
       return  state.list[ind].price * state.list[ind].count;
      }
    },
    mycount(state){
        state.sum=0;   //必须初始化每次的数量
        for(let i= 0;i<state.list.length;i++){//遍历总数
            let num = state.list[i].count;
            state.sum+=num
        }
        return state.sum;
    },
    allPrice(state){
        state.sum=0;//必须初始化每次的数量确保每次遍历的值都是准确的
        state.price=0;//必须初始化每次的价格确保每次遍历的值都是准确的
        for(let i= 0;i<state.list.length;i++){ //遍历总数
            let num = state.list[i].count;
            let price = state.list[i].price;
            state.price += num*price;
        }
        return state.price;
    }
  },
  mutations: {
    add(state,ind) {  //进行数量的增加
        state.list[ind].count++;
    },
    del(state,ind) { //进行数量的
      if (state.list[ind].count === 0) {
        state.list[ind].count === 0;
      } else {
        state.list[ind].count--;
      }
    }
  }
})
export default store;

app.vue

<template>
  <div id="app">
    <table class="table">
      <tr>
        <td>商品</td>
        <td>价格</td>
        <td>数量</td>
        <td colspan="3"></td>
      </tr>
       <tr v-for='(item,ind) in list' :key="ind">
         <td> {{item.goodsname}}</td>
          <td>{{item.price}}/斤</td>
          <td><input type="text" v-model.number="item.count" class="num" ></td>
          <td>总价{{sellPrice(ind)}}</td>
          <td>
            <button @click="add(ind)">add</button>
         </td>
         <td><button @click="del(ind)">del</button></td>
       </tr>
        <tr>
          <td colspan="2"></td>
          <td>
           <span>总量{{mycount}}</span>
        </td>
        <td>
          <span>结算{{allPrice}}</span>
        </td>
        </tr>
    </table>
  </div>
</template>

<script>
import { mapGetters, mapState, mapMutations, mapActions } from "vuex";
export default {
  name: "App",
  computed: {
    ...mapGetters(["sellPrice", "mycount", "allPrice"]),
    ...mapState(["list"])
  },
  created() {},
  methods: {
    ...mapMutations(["add", "del"])
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.num {
  max-width:100px;
  width: 20px;
  display: inline-block;
  height: auto;
  outline: none;
  text-align: center;
}
.table {
  width: 500px;
  overflow: hidden;
  background: skyblue;
}
tr,td{
  width: 100px;
  text-align: center;
  border: none;
  border: 1px solid black;
}
</style>