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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 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在字符断点处截断文字的实现代码
2011/04/21 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
javascript基础知识讲解
2017/01/11 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
单位领导证婚词
2014/01/14 职场文书
质检部经理岗位职责
2014/02/19 职场文书
运动会加油稿20字
2014/11/15 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
工程资料员岗位职责
2015/04/13 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
python 多态 协议 鸭子类型详解
2021/11/27 Python
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技