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 22 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
Vue3实现简易音乐播放器组件
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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
详解如何较好的使用js
2016/12/16 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
js实现网页随机验证码
2020/10/19 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
python代码实现图书管理系统
2020/11/30 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
外贸采购员求职的自我评价
2013/11/26 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
环卫工作汇报材料
2014/10/28 职场文书
博物馆观后感
2015/06/05 职场文书
校园广播稿范文
2015/08/19 职场文书
中学语文教学反思
2016/02/16 职场文书
PHP使用QR Code生成二维码实例
2021/07/07 PHP
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server