引用在vue组件的data选项，不因数值被改变而更新
引在在vue组件的computed选项，因数值变化而更组件
安例代码如下，调整下引用vue和vuex地址即可展示
<!DOCTYPE html>
<html>
<head>
<title> 箭头函数</title>
<script src="js/vue.js" type="text/javascript"></script>
<script src="js/vuex.js" type="text/javascript"></script>
<meta charset="utf-8"/>
</head>
<body>
<div id="app">
{{msg}}
<h3>{{count}}</h3>
<h3>{{count2}}</h3>
<h3>{{this.$store.state.count}}</h3>
<input type='button' value="clickme +" v-on:click='incrementCount'>
</div>
<script>
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
var app=new Vue({
el:'#app',
data(){
return{
msg:'app.vue 组件',
count2:this.$store.state.count
}
},
store,
computed:{
count:function(state) {
// body...
return this.$store.state.count
}
},
methods:{
incrementCount:function(){
return this.$store.commit('increment')
}
}
})
</script>
</body>
</html>