1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <%--<link rel="stylesheet" href="/static/common/css/iview.css">--%>
    <script src="/static/common/js/vue.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="/static/common/js/iview.min.js"></script>

</head>
<body>
<div id="app">
    <price_component></price_component>
<sub1></sub1>
    <i-button @click="addTotal" type="success" style="margin:2px;">addTotal</i-button>
</div>

<template id="price_component">
    <div>
        <h1>价格:{{totalPrice}}</h1>
    </div>
</template>
<template id="sub1">
<div>
    <table>
        <thead>
        <td>名称</td>
        <td>数量</td>
        <td>价格(元)</td>
        <td>金额(元)</td>
        <td>操作</td>
        </thead>
        <tbody>
        <tr v-for="good in goods">
        <td>{{good.name}}</td>
        <td><input v-model="good.count"></td>
        <td>{{good.price}}</td>
        <td>{{good.total}}</td>
            <td><i-button @click="del(good.id)">删除</i-button></td>
        </tr>
        </tbody>
    </table>

</div>
</template>

<script>

    var store =new Vuex.Store({
        state:{
            total:1,
            goods:[
                {id:1,name:"7plus",count:2,price:122},
                {id:2,name:"iphone X",count:5,price:198},
            ]
        },
        getters:{
            totalPrice:function(state){
                var f = 0;
                state.goods.forEach(function(g){
                    f = f+ g.count*g.price;
                })
                return f;
            },
            goods:function(state){
                var f = 0;
                state.goods.forEach(function(g){
                    g.total=g.count*g.price;
                })
                return store.state.goods;
            }
        },
        mutations:{
            delGoods:function(state,params){
                var t ;
                for(var i=0;i<state.goods.length;i++){
                    if(state.goods[i].id==params){
                        t=i;break;
                    }
                }
                state.goods.splice(t,1);
                console.info("接收到数据为"+params);
            }
        }
    });
    Vue.component("price_component",{
        template:"#price_component",
        computed:{
            totalPrice:function(){
                return this.$store.getters.totalPrice;
            }
        }
    })
    Vue.component("sub1",{
        template:"#sub1",
        methods:{
            del:function(id){
                this.$store.commit("delGoods",id);
            }
        },
        computed:{
            totalPrice:function(){
                return this.$store.getters.totalPrice;
            },
            goods:function(){
                return this.$store.getters.goods;
            }
        }
    })
    var app = new Vue({
        el: '#app',
        store:store,
        methods: {
            addTotal:function(){
                this.$store.state.total++;
            }
        }
    })
</script>
</body>
</html>