070——VUE中vuex之使用getters计算每一件购物车中商品的总价

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vuex之使用getters计算每一件购物车中商品的总价</title><script src="vue.js"></script><script src="vuex.js"></script>
</head>
<body>
<div id="demo"><Lists></Lists>
</div>
<script type="text/x-template" id="Lists"><div><h1>购物车</h1><table border="1"><tr><th>编号</th><th>名称</th><th>价格</th><th>数量</th><th>总计</th></tr><tr v-for="v in goods"><td>{{v.id}}</td><td>{{v.title}}</td><td>{{v.price}}</td><td>{{v.num}}</td><td>{{v.totalPrice}}</td></tr></table><h1>总价：{{totalPrice}}</h1></div>
</script>
<script>let Lists = {template: "#Lists",computed: {totalPrice() {return this.$store.getters.totalPrice;},goods() {return this.$store.getters.goods;}}}let store = new Vuex.Store({state: {goods: [{id: 1, title: 'ihpone7', price: 100, num: 3},{id: 2, title: 'vivo20', price: 100, num: 2}]},getters: {//获取商品总价：totalPrice: state => {let totalPrice = 0;state.goods.forEach((v) => {totalPrice += v.num * v.price;});return totalPrice;},goods(state) {let goods = state.goods;goods.forEach((v) => {v.totalPrice = v.num * v.price;})return goods;}}});var app = new Vue({el: "#demo",store,components: {Lists}});
</script>
</body>
</html>

转载于:https://www.cnblogs.com/yiweiyihang/p/8372467.html

070——VUE中vuex之使用getters计算每一件购物车中商品的总价相关推荐

谈谈对计算机思维在生活中的应用,逻辑思维及计算思维在日常学习中的应用(一)...
"许多宝爸宝妈问我,为什么要让孩子学习编程? 其实所有的人类认知过程,都离不开"思维三部曲":WHY,WHAT,HOW.为什么学?学什么?怎么学?探寻这三个问题答案的过程 ...
Vue（Vuex插件）
一.Vuex的介绍 1. 概念专门在Vue中实现集中式状态数据管理的一个Vue插件,对Vue的应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信. ...
Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance解决
文章目录 Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance解决解决办法详细解释一下附 ...
公路中、边桩坐标计算及放样程序
公路中.边桩坐标计算及放样程序适用范围:单圆曲线.基本型缓和曲线.非对称基本型缓和曲线.卵型曲线.回头曲线(转角大于180度) 特点:1．任意半径曲线.任意交角边桩 2．子程序可独立执行源程序: ...
ASP.NET AJAX示例程序：实现IDragSource和IDropTarget接口将商品拖放至购物车中
本文来自<ASP.NET AJAX程序设计--第II卷:客户端Microsoft AJAX Library相关>第9章第3节. 9.3 示例程序:实现IDragSource和IDropTa ...
购物车中选择物品结算功能的实现
1.概要总有学生要解决购物车物品结算问题,下面给出了一个简单的实现: 1.1.购物车中的物品可以修改数量 1.2.购物车中的物品可以选择支付[并不对全部物品支付] 1.3.需支付的物品总价,需要显 ...
uniapp、vue，vuex中state改变，getters不动态改变的完美解决方案！
uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! 参考文章: (1)uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! ( ...
vuex的计算属性_vue中vuex的五个属性和基本用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...
Vuex 之二：3种拿到 state 中数据并执行 getters 中方法的过程与实例剖析
Ⅰ.Vuex 简介: 1.Vuex 是什么? 答:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式: 而所谓状态就是指:组件中所维护的数据); (简而言之:就是状态管理,解决复杂组件数据 ...

070——VUE中vuex之使用getters计算每一件购物车中商品的总价

070——VUE中vuex之使用getters计算每一件购物车中商品的总价相关推荐

最新文章

热门文章