vuex的state在組件選項data和computed上引用的區別

時間 2020-06-03

標籤 vuex state 組件選項 data computed 引用區別简体版

原文原文鏈接

引用在vue組件的data選項，不因數值被改變而更新
引在在vue組件的computed選項，因數值變化而更組件javascript

案例代碼以下，調整下引用vue和vuex地址便可展現 html

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。