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单元格多列合并的实现
Nov 26 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 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
咖啡的化学
2021/03/03 咖啡文化
实用函数4
2007/11/08 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
vue组件三大核心概念图文详解
2019/05/30 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Python基础练习之用户登录实现代码分享
2017/11/08 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
策划总监岗位职责
2014/02/16 职场文书
购房意向书范本
2014/04/01 职场文书
感恩之星事迹材料
2014/05/03 职场文书
产品推广策划方案
2014/05/10 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
主持人大赛开场白
2015/05/29 职场文书