vuex实现简单的购物车功能

本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下

文件目录如下:

购物车组件

<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>价格</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>价格</td>
                <td>数量</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">暂无数据</td>
            </tr>
            <tr>
                <td colspan="2">总数:{{totalNum}}</td>
                <td colspan="2">总价格:{{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 创建

npm install vuex --save,创建vuex文件夹,在文件夹中创建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
    }
})

建立一个模块文件夹modules,里面创建创建当个store模块,然后默认输出,在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: '蚂蚁上数',
            price : 13
        }, {
            id: 50,
            name: '腊肉炒蒜薹',
            price : 15
        }],
        add : []
}

const getters = {
    // 获取商品列表
    getShopList: state => state.shop_list,
    // 获取购物车列表
    addShopList: state => {
        // map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值
        return state.add.map(({ id, num }) => {
            let product = state.shop_list.find(n => n.id == id)// find()方法返回通过测试(函数内判断)的数组的第一个元素的值,如果没有符合条件的元素返回undefined
            if (product) {//    如果存在该商品
                return {//  返回对象
                    ...product,
                    num
                }
            }
        })
    },
     // 获取总数量
     totalNum: (state, getters) => {
         let total = 0
         getters.addShopList.map(n => {
             total += n.num
         })
         return total
    },
    // 计算总价格
    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')
    },
    // 删除单个物品
    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 { // 如果商品已经加入购物车,则改变数量
            record.num++
        }
    },
    // 删除单个物品
    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
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 使用vuex较为优雅的实现一个购物车功能的示例代码

    前言 最近使用Vue全家桶手撸了一个pc版小米商城的前端项目,对于组件通信和状态管理有了一个更加深刻的认识.因为组件划分的比较细,开始我使用的是基本的props和emit传值,后来发现一旦嵌套过深就变得很繁琐,同时考虑到有多个组件存在需要共同管理的状态,基本的传值已经没有办法满足需求了,所以使用到了vuex来划分模块管理状态.这里需要提一点就是,如果不存在多组件共同管理的状态,最好是不用vuex管理,vuex是用来管理多组件共同状态的,单单只需要实现跨组件.隔代组件通信的话,使用eventbus

  • vuex实现的简单购物车功能示例

    本文实例讲述了vuex实现的简单购物车功能.分享给大家供大家参考,具体如下: 购物车组件 <template> <div> <h1>vuex-shopCart</h1> <div class="shop-listbox"> <shop-list/> </div> <h2>已选商品</h2> <div class="shop-cartbox"> &l

  • vuex实现购物车功能

    本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下 页面布局: 采用了element-ui的表格对商品列表和购物车列表进行布局 1.商品列表 <template> <div class="shop-list"> <table> <el-table :data="shopList" style="width: 100%"> <el-table-column label

  • 用vuex写了一个购物车H5页面的示例代码

    通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.简单的来说,就是数据共用,对数据集中起来进行统一的管理. 如果您的应用够简单,您最好不要使用 Vuex.一个简单的 global event bus 就足够您所需了.但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的

  • vuex实现购物车的增加减少移除

    本文实例为大家分享了vuex实现购物车增加减少移除的具体代码,供大家参考,具体内容如下 1.store.js(公共的仓库) import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { carList: [] //购物车的商品 }, mutations: { // 加 addCar(state, params) { let CarCon = state.ca

  • 基于vuex实现购物车功能

    本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下 先看效果: 代码: <template> <div class="Home"> <h1>vuex购物车案例</h1> <add-from></add-from> <shop-cart></shop-cart> </div> </template> <script> import

  • Vuex实现购物车小功能

    Vuex实现购物车功能(附:效果视频),供大家参考,具体内容如下 功能描述: 加购 删除 加减 全选反选 选中计算总价 存储 整体演示效果如下: 首先介绍一下Vuex: Vuex 实例对象属性 主要有下面5个核心属性: state : 全局访问的state对象,存放要设置的初始状态名及值(必须要有) mutations : 里面可以存放改变 state 的初始值的方法 ( 同步操作–必须要有 ) getters: 实时监听state值的变化可对状态进行处理,返回一个新的状态,相当于store的计

  • Vuex实现简单购物车

    本文实例为大家分享了Vuex实现简单购物车的具体代码,供大家参考,具体内容如下 文件结构 App.vue <template> <div id="app"> <h3>Shopping Cart Demo</h3> <hr> <h4>Products:</h4> <ProductList /> <hr> <h4>My Cart</h4> <Shoppi

  • vuex实现简单的购物车功能

    本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下 文件目录如下: 购物车组件 <template> <div> <h1>vuex-shopCart</h1> <div class="shop-listbox"> <shop-list /> </div> <h2>已选商品</h2> <div class="shop-cartbox&qu

  • 使用Angular.js实现简单的购物车功能

    先给大家分享实现代码,在代码下面有效果图展示,大家可以两者结合参考下,废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://code.angularjs.org/1.2.5/angular.min.js"></script

  • JAVAEE中用Session简单实现购物车功能示例代码

    Session简单实现购物车功能 这个小程序主要就3个页面,一个商品列表页面(HomeServlet),一个是提示加入购物车页面(AddCartTipServlet),一个是显示购物车清单页面(ShowCartServlet). HomeServlet页面: @WebServlet({ "/HomeServlet", "/home" }) public class HomeServlet extends HttpServlet { private static fi

  • vue实现简单的购物车功能

    本文实例为大家分享了vue实现简单购物车功能的具体代码,供大家参考,具体内容如下 1.实现效果: 2.涉及到的知识点: toFixed函数.过滤器.reduce高阶函数.v-bind:disabled.v-if 3.代码: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-

  • jQuery使用cookie与json简单实现购物车功能

    本文实例讲述了jQuery使用cookie与json简单实现购物车的方法.分享给大家供大家参考,具体如下: 1.生成一个cookie 用来存储商品的id  String类型 2.添加商品id的时候 把cookie转化成数组,并检查是否已经包含了.没有包含用js push重新生成新的数组. 3.把数组转化成String 用cookie存储. 以下是jquery对cookie和JSON的操作方法 $.cookie("cart","ids",{expires:-7,pat

  • angularjs实现简单的购物车功能

    本文实例为大家分享了angularjs实现购物车功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; margin-left: 10px; } li{ list-

  • Listvie简单实现购物车功能

    本文实例为大家分享了Listvie简单实现购物车的具体代码,供大家参考,具体内容如下 1.自定义view实现加减 public class MyView extends LinearLayout implements View.OnClickListener { private OnAmountChangeListener mListener; private int count; private TextView numText; public MyView(Context context)

  • vue编写简单的购物车功能

    使用vue写出简单的购物车,供大家参考,具体内容如下 代码: // An highlighted block <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&

  • php实现简单加入购物车功能

    今天在练习购物车以及提交订单,写的有点头晕,顺便也整理一下,这个购物车相对来说比较简单,用于短暂存储,并没有存储到数据库, 购物车对于爱网购的人来说简直是熟悉的不能再熟悉了,在写购物车之前,我们首先要构思一下,我们需要先从数据库中调出一张表格,这里 我用的是fruit表,其次是登录表,我用的是login表,用来调用户名和密码的,所有的都准备好之后就要考虑放入购物车是会有三种情况的: 第一种情况:购物车里面什么都没有 第二种情况:购物车里面已经有此产品了,再次加入 这种情况下考虑到的是 数量要+1

  • 微信小程序实现简单的购物车功能

    本文实例为大家分享了微信小程序实现简单购物车的具体代码,供大家参考,具体内容如下 实现一个购物车页面,需要哪些数据.整理下大概如下:一个购物车商品列表(carts),列表里的单个item包含:商品id(id),商品图(image),商品名(title),单价(price),数量(amount),单选按钮(selected):全选按钮,需要一个字段(selectAllStatus)表示是否全选:总价(totalPrice):总数量(totalNum).还有一个需要判断的是购物车是否为空(hasLi

随机推荐