vuex實(shí)現(xiàn)簡單的購物車功能
本文實(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 簡單實(shí)現(xiàn)前端權(quán)限控制的示例
這篇文章主要介紹了Vue 簡單實(shí)現(xiàn)前端權(quán)限控制的示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12vue循環(huán)數(shù)組改變點(diǎn)擊文字的顏色
這篇文章主要為大家詳細(xì)介紹了vue循環(huán)數(shù)組改變點(diǎn)擊文字的顏色,非常實(shí)用的切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10vant 時(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)綁定問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue中radio單選框如何實(shí)現(xiàn)取消選中狀態(tài)問題
這篇文章主要介紹了vue中radio單選框如何實(shí)現(xiàn)取消選中狀態(tài)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05