当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vuex实现的简单购物车功能示例

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

2019年03月15日  | 移动技术网IT编程  | 我要评论

缩阴运动,说唱表白词,wonderwall伴奏

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网