将store放在root vue实例中，便于共享数据
获取数据时，放到computed里，这样可以保证 数据是可响应的.

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
<%@ 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">

<sub1></sub1>
    <i-button @click="addTotal" type="success" style="margin:2px;">addTotal</i-button>

</div>

<template id="sub1">
<div>
    <table>
        <thead>
        <td>名称</td>
        <td>数量</td>
        <td>价格(元)</td>
        <td>金额(元)</td>
        </thead>
        <tbody>
        <tr v-for="good in goods">
        <td>{{good.name}}</td>
        <td>{{good.count}}</td>
        <td>{{good.price}}</td>
        <td>{{good.price*good.count}}</td>
        </tr>
        </tbody>
    </table>
    <h1>价格:{{totalPrice}}</h1>
</div>
</template>

<script>

    var store =new Vuex.Store({
        state:{
            total:1,
            goods:[
                {name:"7plus",count:2,price:122},
                {name:"iphone X",count:5,price:198},
            ]
        }
    });
    Vue.component("sub1",{
        template:"#sub1",
        methods:{
        },
        computed:{
            totalPrice:function(){
                return this.$store.state.total;
            },
            goods:function(){
                return this.$store.state.goods;
            }
        }
    })
    var app = new Vue({
        el: '#app',
        store:store,
        methods: {
            addTotal:function(){
                this.$store.state.total++;
            }
        }
    })
</script>
</body>
</html>