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


Posted in Javascript onFebruary 13, 2019

本文实例讲述了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 shopList from "./shop-list";
  import shopCart from './shop-cart';
  export default{
    name:'shop',
    components:{
      'shop-list':shopList,
      'shop-cart':shopCart
    }
  }
</script>

商品列表

<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">
        <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{mapActions} from "vuex";
  export default{
    name:'shopList',
    data(){
      return{
      }
    },
    computed:{
      shopList(){
        return this.$store.getters.getShopList
      }
    },
    methods:{
      ...mapActions(['addToCart'])
    }
  }
</script>
<style lang="less" scoped>
  @import url('../../static/public.less');
</style>

选中商品列表

<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">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td>{{item.num}}</td>
        <td><button class="shop-dele dele-btn" @click="deletShop(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',
        deletShop:'deletToShop'
      })
    }
  }
</script>
<style lang="less" scoped>
  @import url('../../static/public.less');
  .dele-btn{
    background-color: red !important;
  }
  .dele-btn:hover{
    background-color: #bd0000 !important;
  }
</style>

vuex 创建

npm install vuex --save,创建vuex文件夹,在文件夹中创建store.js,引入vuex;

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中引入;

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 => {
    return state.add.map(({id,num})=>{
      let product = state.shop_list.find(n => n.id == id);
      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
}

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
jquery无缝图片轮播组件封装
Nov 25 #jQuery
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 #Javascript
vue写h5页面的方法总结
Feb 12 #Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 #Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 #Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 #Javascript
图文详解vue框架安装步骤
Feb 12 #Javascript
You might like
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python开发常用的一些开源Package分享
2015/02/14 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
如何理解python面向对象编程
2020/06/01 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
教师绩效工资方案
2014/02/01 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
满月酒主持词
2014/03/27 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
保护环境倡议书500字
2014/05/19 职场文书
志愿者活动总结报告
2014/06/27 职场文书
公司感谢信范文
2015/01/22 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
公司聚餐通知
2015/04/22 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js