使用vuex怎么實(shí)現(xiàn)一個(gè)購(gòu)物車功能？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)主營(yíng)恩施土家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,手機(jī)APP定制開(kāi)發(fā),恩施土家h5成都微信小程序搭建,恩施土家網(wǎng)站營(yíng)銷推廣歡迎恩施土家等地區(qū)企業(yè)咨詢

代碼：

<template>
 <div class="Home">
 <h2>vuex購(gòu)物車案例</h2>
 <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;
}
h2{
 text-align: center;
}
.add{
 width: 800px;
 margin: 0 auto;
}
</style>

父組件

<template>
 <div class="add">
 <div class="from-group">
 <label for="">商品編號(hào)</label>
 <input type="text" v-model="shop.id" placeholder="請(qǐng)輸入商品編號(hào)">
 </div>
 <div class="from-group">
 <label for="">商品名稱</label>
 <input type="text" v-model="shop.name" placeholder="請(qǐng)輸入商品名稱">
 </div>
 <div class="from-group">
 <label for="">商品價(jià)格</label>
 <input type="text" v-model="shop.price" placeholder="請(qǐng)輸入商品價(jià)格">
 </div>
 <div class="from-group">
 <label for="">商品數(shù)量</label>
 <input type="text" v-model="shop.count" placeholder="請(qǐng)輸入商品數(shù)量">
 </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>商品編號(hào)</th>
  <th>商品名稱</th>
  <th>商品價(jià)格</th>
  <th>商品數(shù)量</th>
  <th>小計(jì)</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">總計(jì)：{{ total }}</td>
  <button @click="clear">清除購(gòu)物車</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', e);
 },
 delet(e) {
 this.$store.dispatch('deleteList', e);
 },

 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: "哇哈",
 price: 3,
 count: 0
 }
 ]
 },
 getters: {
 //獲取購(gòu)物車數(shù)據(jù)
 getlist(state) {
 return state.list
 },
 //商品的總價(jià)
 getShopTotal(state,index) {
 let result = 0;
 state.list.forEach((item, index) => {
 result += item.price * item.count
 })
 return result
 },
 },
 mutations: {
 //刪除購(gòu)物車單個(gè)數(shù)據(jù)
 remoteList(state,index) {
 state.list.splice(index, 1);
 console.log("aaa",state)
 },
 //商品數(shù)量增加
 addList(state, index) {
 state.list[index].count++;
 },
 //商品數(shù)量減少
 deleteList(state, index) {
 state.list[index].count--;
 if(state.list[index].count<=0){
 state.list[index].count = 0
 return ;
 }
 },

 //清除購(gòu)物車
 clearList(state, arr) {
 state.list = arr
 },
 addShopList(state,shop){
 state.list.push(shop)
 }
 },
 //使用actions調(diào)用mutations方法
 actions: {
 remoteList({
 commit
 }, index) {
 commit("remoteList", index)
 },
 addList({
 commit
 }, index) {
 commit("addList", index)
 },
 deleteList({
 commit
 }, index) {
 commit("deleteList", index)
 },
 clearList({
 commit
 }, arr) {
 commit("clearList", arr)
 },
 addShopList({commit},shop){
 commit("addShopList",shop)
 }
 },
 modules: {}
})

關(guān)于使用vuex怎么實(shí)現(xiàn)一個(gè)購(gòu)物車功能問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

網(wǎng)站題目：使用vuex怎么實(shí)現(xiàn)一個(gè)購(gòu)物車功能-創(chuàng)新互聯(lián)
鏈接URL：http://chinadenli.net/article10/hdego.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、App開(kāi)發(fā)、云服務(wù)器、網(wǎng)站改版、ChatGPT、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)