계산된 속성 및 VueX를 사용한 스타일 바인딩

계산된 속성 및 VueX를 사용한 스타일 바인딩

VueX와 통합하면서 VueJ의 계산된 속성을 사용하여 스타일을 바인드하려면 어떻게 해야 합니까?

VueX Store 변경 후 스타일 속성이 업데이트되지 않은 것이 문제입니다.

코드 예:

//VueX Store
const store = new Vuex.Store({
	state : {
		div: [
			{
				offset: 0,
				width: 1,
				text : 'Hello World'
			},
			{
				offset: 0,
				width: 1,
				text : 'Hello World As Well'
			}
		]
  }
});

//My component
<template>
	<div v-bind:style="{ width: width, left: offset}">
		<p>{{text}}</p>
	</div>
</template>

<script>
export default {
		name: 'divBox',
		computed : {
			text : function() {
				return this.$store.state.div[this.Id].text;
			},
			width : function() {
				return this.$store.state.div[this.Id].width;
			},
			offset : function() {
				return this.$store.state.div[this.Id].offset;
			}
		},
		props : ['Id']
}
</script>

다음은 원하는 작업을 수행하기 위해 vuex를 사용하는 방법의 실제 예입니다.https://jsfiddle.net/n9jmu5v7/770/ 당신의 문제는 당신의 가게에 돌연변이가 없다는 것입니다.https://vuex.vuejs.org/en/mutations.html

mutations: {
  bgChange: state => state.bg='grey',
  colorChange: state => state.color='green'
}

또한 vuex를 사용한다고 해서 모든 것을 투입할 필요는 없으며 로컬 데이터를 컴포넌트에 보관하는 것도 좋습니다.예를 들어 컴포넌트 스타일 정보는 다른 것과 공유할 필요가 없는 것처럼 들립니다(분명히 vuex에 저장할 이유가 있을 수 있습니다).

언급URL : https://stackoverflow.com/questions/42708340/style-binding-using-computed-properties-and-vuex