本文例項為大家分享了vuex實現購物車功能的具體程式碼，供大家參考，具體內容如下

先看效果:

程式碼：

<template>
 <div class="Home">
 <h1>vuex購物車案例</h1>
 <add-from></add-from>
 <shop-cart></shop-cart>
 </div>
</template>

<script>
import AddFrom from './Add.vue'
import ShopCart from './ShopCart.vue'
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
export default {
 name: 'Home',components: {
 AddFrom,ShopCart
 },};
</script>
<style>
table {
 width: 800px;
 margin: 0 auto;
 border: 1px solid #ccc;
 border-spacing: 0;
}
tbody th,tbody td {
 border: 1px solid #ccc;
 text-align: center;
}
h1{
 text-align: center;
}
.add{
 width: 800px;
 margin: 0 auto;
}
</style>

父元件

<template>
 <div class="add">
 <div class="from-group">
 <label for="">商品編號</label>
 <input type="text" v-model="shop.id" placeholder="請輸入商品編號">
 </div>
 <div class="from-group">
 <label for="">商品名稱</label>
 <input type="text" v-model="shop.name" placeholder="請輸入商品名稱">
 </div>
 <div class="from-group">
 <label for="">商品價格</label>
 <input type="text" v-model="shop.price" placeholder="請輸入商品價格">
 </div>
 <div class="from-group">
 <label for="">商品數量</label>
 <input type="text" v-model="shop.count" placeholder="請輸入商品數量">
 </div>
 <div class="from-group">
 <button @click="add">新增商品</button>
 </div>
 </div>
</template>

<script>
export default {
 name: 'add',data() {
 return {
 shop:{}
 };
 },methods:{
 add(){
 
 this.$store.dispatch("addShopList",this.shop)
 this.shop = {
 id:"",name:"",price:"",count:""
 }
 }
 }
};
</script>

<style scoped>
 .add{
 width: 800px;
 text-align: center;
 }
</style>

```bash

<template>
 <div class="Shop-Cart">

 <table>
 <thead border>
 <tr>
  <th>商品編號</th>
  <th>商品名稱</th>
  <th>商品價格</th>
  <th>商品數量</th>
  <th>小計</th>
  <th>操作</th>
 </tr>
 </thead>
 <tbody v-if="shop.length > 0">
 <tr v-for="(i,e) in shop" :key="e">
  <td>{{ i.id }}</td>
  <td>{{ i.name }}</td>
  <td>{{ i.price }}</td>
  <td>
  <button @click="add(e)">+</button>
  <input type="text" v-model="i.count" />
  <button @click="delet(e)">-</button>
  </td>
  <td>￥{{ i.price * i.count }}</td>
  <td><button @click="del(e)">刪除</button></td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
  <td colspan="6" align="right">總計：{{ total }}</td>
  <button @click="clear">清除購物車</button>
 </tr>
 </tfoot>
 </table>
 </div>
</template>

<script>
export default {
 name: 'Shop-Cart',components: {},data() {
 return {};
 },computed: {
 shop() {
 return this.$store.getters.getlist;
 },total() {
 return this.$store.getters.getShopTotal;
 }
 },methods: {
 del(e) {
 // this.$store.dispatch()
 this.$store.dispatch('remoteList',e);
 },add(e) {
 this.$store.dispatch('addList',delet(e) {
 this.$store.dispatch('deleteList',clear() {
 this.$store.dispatch('clearList',[]);
 }
 }
};
</script>

vuex元件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


export default new Vuex.Store({
 state: {
 list: [{
 id: 1,name: "哇哈哈",price: 3,count: 0
 },{
 id: 2,name: "哇哈",count: 0
 }
 ]
 },getters: {
 //獲取購物車資料
 getlist(state) {
 return state.list
 },//商品的總價
 getShopTotal(state,index) {
 let result = 0;
 state.list.forEach((item,index) => {
 result += item.price * item.count
 })
 return result
 },},mutations: {
 //刪除購物車單個數據
 remoteList(state,index) {
 state.list.splice(index,1);
 console.log("aaa",state)
 },//商品數量增加
 addList(state,index) {
 state.list[index].count++;
 },//商品數量減少
 deleteList(state,index) {
 state.list[index].count--;
 if(state.list[index].count<=0){
 state.list[index].count = 0
 return ;
 }
 },//清除購物車
 clearList(state,arr) {
 state.list = arr
 },addShopList(state,shop){
 state.list.push(shop)
 }
 },//使用actions呼叫mutations方法
 actions: {
 remoteList({
 commit
 },index) {
 commit("remoteList",index)
 },addList({
 commit
 },index) {
 commit("addList",deleteList({
 commit
 },index) {
 commit("deleteList",clearList({
 commit
 },arr) {
 commit("clearList",arr)
 },addShopList({commit},shop){
 commit("addShopList",shop)
 }
 },modules: {}
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。