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

红太狼 2021-03-25 15:07 444阅读 0赞

<!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">
        <footer-cart></footer-cart>
        <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>
                        <input type="text" v-model="v.num">
                    </td>
                    <td>{
         {v.totalPrice}}</td>
                </tr>
            </table>
    
        </div>
    </script>
    <script type="text/x-template" id="footerCart">
        <div>
            总计：{
         {totalPrice}}
        </div>
    </script>
    <script>
        let Lists = {
            template: "#Lists",
            computed: {
                goods() {
                    return this.$store.getters.goods;
                }
            }
        }
        let footerCart = {
            template: "#footerCart",
            computed: {
                totalPrice() {
                    return this.$store.getters.totalPrice;
                }
            }
        }
        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,footerCart
            }
        });
    </script>
    </body>
    </html>