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 element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 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
PHP Document 代码注释规范
2009/04/13 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
详解javascript void(0)
2020/07/13 Javascript
深入理解Python中装饰器的用法
2016/06/28 Python
Python书单 不将就
2017/07/11 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
数控专业应届生求职信
2013/11/27 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
职业生涯规划书前言
2014/04/15 职场文书
高中班级口号
2014/06/09 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
学生会招新宣传语
2015/07/13 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js