<!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>
