引用在vue組件的data選項，不因數值被改變而更新
引在在vue組件的computed選項，因數值變化而更組件
案例代碼如下，調整下引用vue和vuex地址即可展示
<!DOCTYPE html>
<html>
<head>
<title> vuex的配置state,mutations 和vue組件調用及模板組件</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}}
<!-- 此處渲染count來自vue組件，computed選項，隨值改變而改變渲染 -->
<h3>{{count}}</h3>
<!-- 此處渲染count2來自vue組件data選項，不隨值改變而改變渲染 -->
<h3>{{count2}}</h3>
<!-- 直接調用vuex的state選項，不推薦，推薦是computed引用后再洹染 -->
<h3>{{this.$store.state.count}}</h3>
<input type='button' value="clickme +" v-on:click='incrementCount'>
<hr/>
<!-- 組件名稱有大小寫，模板調用用短線隔開
如：studentV 轉換成student-v -->
<student-v></student-v>
</div>
<script>
const store = new Vuex.Store({
state: {
count: 0,
student:'學生信息'
},
mutations: {
increment (state) {
state.count++
}
}
})
// 創建一個 student 組件
const studentV = {
template: `<div>{{ student }}</div>`,
computed: {
student () {
return store.state.student+" "+store.state.count
}
}
}
var app=new Vue({
el:'#app',
data(){
return{
msg:'app.vue 組件',
count2:this.$store.state.count
}
},
store,
components:{studentV},
computed:{
count:function(state) {
return this.$store.state.count
}
},
methods:{
incrementCount:function(){
//引用 vuex下的mutations選項書寫的函數
return this.$store.commit('increment')
}
}
})
</script>
</body>
</html>