Vuex实现简单购物车


Posted in Vue.js onJanuary 10, 2021

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

文件结构

Vuex实现简单购物车

App.vue

<template>
 <div id="app">
 <h3>Shopping Cart Demo</h3>
 <hr>
 <h4>Products:</h4>
 <ProductList />
 <hr>
 <h4>My Cart</h4>
 <ShoppingCart />
 </div>
</template>
<script>
import ProductList from '@/components/ProductList';
import ShoppingCart from '@/components/ShoppingCart';
 
export default {
 components: {
 ProductList,
 ShoppingCart
 }
}
</script>

Products.vue

<template>
 <div>
  <ul v-for="item in products" :key="item.id">
  <li>
   {{ item.title }} - {{ item.price }}    库存: {{ item.inventory }}<br>
   <button :disabled="!item.inventory" @click="addToCart(item)">add to cart</button> 
  </li>
  </ul>
 </div>
 
</template>
 
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
 computed: {
 // ...mapGetters('products',{
 // products: 'allProducts'
 // })
 ...mapGetters({
  products: 'products/allProducts'
 })
 },
 methods: {
 ...mapActions('cart',['addToCart'])
 },
 created() {
 this.$store.dispatch('products/getAllProducts');
 }
 
}
</script>

ShoppingCart.vue

<template>
 <div>
 <ul v-for="item in products" :key="item.id">
  <li>{{ item.title }} *{{ item.quantity }}</li>
 </ul>
 <div>total: {{ total }}</div>
 </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
 computed: {
 ...mapGetters('cart', {
  products: 'cartProducts',
  total: 'cartTotalPrice'
 })
 }
}
</script>

modules/products.js

import api from '../../api';
 
const state = {
 all: []
}
 
const getters = {
 allProducts: state => state.all
}
 
const actions = {
 // 获取初始商品数据
 getAllProducts({ commit }) {
 api.getProducts(products => commit('setProducts', products));
 }
}
 
const mutations = {
 setProducts(state, products) {
 state.all = products;
 },
 // 减少该商品库存
 decreamentInventory(state, { id }) {
 let productItem = state.all.find(item => item.id === id);
 productItem.inventory --;
 }
}
 
export default {
 namespaced: true,
 state,
 getters,
 actions,
 mutations
}

modules/cart.js

const state = {
 addedList: []
}
 
const getters = {
 cartProducts(state, getters, rootState) {
 return state.addedList.map((item, index) => {
  let productItem = rootState.products.all.find(product => product.id === item.id);
  return {
  title: productItem.title,
  price: productItem.price,
  quantity: item.quantity
  }
 })
 },
 cartTotalPrice(state, getters) {
 return getters.cartProducts.reduce((total, product) => {
  return total + (product.price * product.quantity);
 }, 0);
 }
}
 
const actions = {
 addToCart({ state, commit }, product) {
 if (product.inventory > 0) {
  let productItem = state.addedList.find(item => item.id === product.id);
  if (productItem) {
  commit('increamentItemQuantity', productItem);
  } else {
  commit('pushItemToCart', product);
  }
  commit('products/decreamentInventory', product, { root: true });
 }
 }
}
 
const mutations = {
 // 增加购物车中同等商品的数量
 increamentItemQuantity(state, { id }) {
 let productItem = state.addedList.find(item => item.id === id);
 productItem.quantity ++;
 },
 // 将商品加入购物车
 pushItemToCart(state, { id }) {
 state.addedList.push({
  id,
  quantity: 1
 })
 },
 
}
 
export default {
 namespaced: true,
 state,
 getters,
 actions,
 mutations
}

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import cart from './modules/cart';
import products from './modules/products';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
 modules: {
 cart,
 products
 }
});

main.js

import Vue from "vue";
import App from "@/components/App.vue";
import store from "@/store";
 
Vue.config.productionTip = false;
 
new Vue({
 store,
 render: h => h(App)
}).$mount("#app");

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

Vue.js 相关文章推荐
vue+iview分页组件的封装
Nov 17 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 #Vue.js
基于vuex实现购物车功能
Jan 10 #Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 #Vue.js
vue编写简单的购物车功能
Jan 08 #Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 #Vue.js
vuex的使用和简易实现
Jan 07 #Vue.js
You might like
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
PHP中each与list用法分析
2016/01/08 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
php格式化json函数示例代码
2016/05/12 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Python日志处理模块logging用法解析
2020/05/19 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
银行学习十八大感想
2014/01/11 职场文书
学校食品安全责任书
2015/01/29 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL