欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vuex實(shí)現(xiàn)簡單的購物車功能

 更新時(shí)間:2022年04月26日 16:59:24   作者:UIEngineer  
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)簡單的購物車功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vuex實(shí)現(xiàn)購物車功能的具體代碼,供大家參考,具體內(nèi)容如下

文件目錄如下:

購物車組件

<template>
    <div>
        <h1>vuex-shopCart</h1>
        <div class="shop-listbox">
            <shop-list />
        </div>
        <h2>已選商品</h2>
        <div class="shop-cartbox">
            <shop-cart />
        </div>
    </div>
</template>

<script>
import shoList from './shop-list'
import shopCart from './shop-cart'

export default {
  name: 'shop',
  components: {
      'shop-list' : shoList,
      'shop-cart' : shopCart
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

商品列表

<template>
    <div class="shop-list">
        <table>
            <tr class="shop-listtitle">
                <td>id</td>
                <td>名稱</td>
                <td>價(jià)格</td>
                <td>操作</td>
            </tr>
            <tr v-for = "item in shopList" class="shop-listinfo" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="addToCart(item)">加入購物車</button>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
import {mapGetters,mapActions} from "vuex";
export default {
    name : 'shopList',
    computed: {
        ...mapGetters({
                shopList:'getShopList',
            })
    },
    methods: {
        ...mapActions(['addToCart'])
    },
}
</script>

選中商品列表

<template>
    <div class="shop-list">
        <table>
            <tr class="shop-listtitle">
                <td>id</td>
                <td>名稱</td>
                <td>價(jià)格</td>
                <td>數(shù)量</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in cartData" class="shop-listinfo" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.num}}</td>
                <td><button class="shop-dele dele-btn" @click="deleteShop(item)">刪除</button></td>
            </tr>
            <tr v-if="cartData.length <= 0">
                <td colspan="5">暫無數(shù)據(jù)</td>
            </tr>
            <tr>
                <td colspan="2">總數(shù):{{totalNum}}</td>
                <td colspan="2">總價(jià)格:{{totalPrice}}</td>
                <td><button class="dele-cart dele-btn" @click="clearCart">清空購物車</button></td>
            </tr>
        </table>
    </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
    name : 'shopCart',
    data(){
        return{
            
        }
    },
    computed: {
        ...mapGetters({
            cartData:'addShopList',
            totalNum : 'totalNum',
            totalPrice:'totalPrice'
        })
    },
    methods: {
        ...mapActions({
            clearCart:'clearToCart',
            deleteShop:"deletToShop"
        })
    }
}
</script>

vuex 創(chuàng)建

npm install vuex --save,創(chuàng)建vuex文件夾,在文件夾中創(chuàng)建store.js,引入vuex;

store.js

import Vue from "vue"
import Vuex from 'vuex'
import cart from './modules/cart'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        cart
    }
})

建立一個(gè)模塊文件夾modules,里面創(chuàng)建創(chuàng)建當(dāng)個(gè)store模塊,然后默認(rèn)輸出,在store.js中引入;

cart.js

const state = {
    shop_list: [{
        id: 11,
        name: '魚香肉絲',
        price : 12
    }, {
            id: 22,
            name: '宮保雞丁',
            price : 14
        }, {
            id: 34,
            name: '土豆絲',
            price : 10
        }, {
            id: 47,
            name: '米飯',
            price : 2
        }, {
            id: 49,
            name: '螞蟻上數(shù)',
            price : 13
        }, {
            id: 50,
            name: '臘肉炒蒜薹',
            price : 15
        }],
        add : []
}

const getters = {
    // 獲取商品列表
    getShopList: state => state.shop_list,
    // 獲取購物車列表
    addShopList: state => {
        // map()方法返回一個(gè)新數(shù)組,數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值
        return state.add.map(({ id, num }) => {
            let product = state.shop_list.find(n => n.id == id)// find()方法返回通過測試(函數(shù)內(nèi)判斷)的數(shù)組的第一個(gè)元素的值,如果沒有符合條件的元素返回undefined
            if (product) {//    如果存在該商品
                return {//  返回對(duì)象
                    ...product,
                    num
                }
            }
        })
    },
     // 獲取總數(shù)量
     totalNum: (state, getters) => {
         let total = 0
         getters.addShopList.map(n => { 
             total += n.num
         })
         return total
    },
    // 計(jì)算總價(jià)格
    totalPrice: (state, getters) => { 
        let total = 0
        getters.addShopList.map(n => { 
            total += n.num * n.price
        })
        return total
    }
},

const actions = {
    // 加入購物車
    addToCart({ commit},product) { 
        commit('addCart', {
            id : product.id
        })
    },
    // 清空購物車
    clearToCart({ commit}) { 
        commit('clearCart')
    },
    // 刪除單個(gè)物品
    deletToShop({ commit},product) { 
        commit('deletShop',product)
    }
}

const mutations = {
    // 加入購物車
    addCart(state, { id}){ 
        let record = state.add.find(n => n.id == id)
        if (!record) {//   如果購物車中不存在該商品
            state.add.push({//  追加商品
                id,
                num : 1
            })
        } else { // 如果商品已經(jīng)加入購物車,則改變數(shù)量
            record.num++
        }
    },
    // 刪除單個(gè)物品
    deletShop(state, product) { 
        state.add.forEach((item,i) => { 
            if (item.id == product.id) {//  如果找到該商品 
                state.add.splice(i,1)
            }
        })
    },
    // 清空購物車
    clearCart(state) { 
        state.add = []
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue組件父子間通信詳解(三)

    vue組件父子間通信詳解(三)

    這篇文章主要為大家詳細(xì)介紹了vue組件父子間通信的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • vue實(shí)現(xiàn)用戶登錄切換

    vue實(shí)現(xiàn)用戶登錄切換

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)用戶登錄切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • Vue 簡單實(shí)現(xiàn)前端權(quán)限控制的示例

    Vue 簡單實(shí)現(xiàn)前端權(quán)限控制的示例

    這篇文章主要介紹了Vue 簡單實(shí)現(xiàn)前端權(quán)限控制的示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • vue.js input框之間賦值方法

    vue.js input框之間賦值方法

    今天小編就為大家分享一篇vue.js input框之間賦值方法具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue循環(huán)數(shù)組改變點(diǎn)擊文字的顏色

    vue循環(huán)數(shù)組改變點(diǎn)擊文字的顏色

    這篇文章主要為大家詳細(xì)介紹了vue循環(huán)數(shù)組改變點(diǎn)擊文字的顏色,非常實(shí)用的切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • vue antd Form表單的使用及說明

    vue antd Form表單的使用及說明

    這篇文章主要介紹了vue antd Form表單的使用及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vant 時(shí)間選擇器--開始時(shí)間和結(jié)束時(shí)間實(shí)例

    vant 時(shí)間選擇器--開始時(shí)間和結(jié)束時(shí)間實(shí)例

    這篇文章主要介紹了vant 時(shí)間選擇器--開始時(shí)間和結(jié)束時(shí)間實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • 關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問題

    關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問題

    今天小編就為大家分享一篇關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue中radio單選框如何實(shí)現(xiàn)取消選中狀態(tài)問題

    vue中radio單選框如何實(shí)現(xiàn)取消選中狀態(tài)問題

    這篇文章主要介紹了vue中radio單選框如何實(shí)現(xiàn)取消選中狀態(tài)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • 解決vue多層彈框時(shí)存在遮擋問題

    解決vue多層彈框時(shí)存在遮擋問題

    本文給大家介紹vue多層彈框時(shí)存在遮擋問題,解決思路首先想到的是找到對(duì)應(yīng)的遮擋層的css標(biāo)簽,然后修改z-index值,但是本思路只能解決首次問題,再次打開還會(huì)存在相同的問題,故該思路錯(cuò)誤,下面給大家?guī)硪环N正確的思路,一起看看吧
    2022-03-03

最新評(píng)論