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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 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网上商城购物车设计代码分享
2012/02/15 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
php报错502badgateway解决方法
2019/10/11 PHP
Maps Javascript
2007/01/22 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
Express的路由详解
2015/12/10 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python读写文件操作示例程序
2013/12/02 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
基于python中theano库的线性回归
2018/08/31 Python
python2与python3共存问题的解决方法
2018/09/18 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
美国性感内衣店:Yandy
2018/06/12 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
唐山大地震观后感
2015/06/05 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL