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>