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 18 Vue.js
深入了解Vue3模板编译原理
Nov 19 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 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类Class的概念
2012/06/14 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
JavaScript闭包详解
2015/02/02 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
Python3读取zip文件信息的方法
2015/05/22 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
Python yield的用法实例分析
2020/03/06 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
什么叫做SQL注入,如何防止
2016/10/04 面试题
银行工作检查书范文
2014/01/31 职场文书
室内设计专业自荐信
2014/05/31 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
员工工作心得体会
2019/05/07 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python
Python turtle编写简单的球类小游戏
2022/03/31 Python