CODEWITHSUNDEEP
bindingvue.jsvuejs2vuex
Nathaniel Deshpande
Nathaniel Deshpande

Reputation: 433

Style-Binding using Computed Properties and VueX

How would I bind styles using computed properties in VueJS while integrating with VueX.

The issue I am having is in regards to my style properties not updating after a change in my VueX Store.

Code Examples: 

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

Upvotes: 2

Views: 2247

Answers (1)

qw3n
qw3n

Reputation: 6334

Here is a working example of how to use vuex to do what you are wanting. https://jsfiddle.net/n9jmu5v7/770/ I assume your problem is the fact that your store does not contain any mutations https://vuex.vuejs.org/en/mutations.html. 

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

Also, remember that just because your using vuex doesn't mean you need to put everything into it, it is fine to keep local data in a component. For example component style information sounds like something that doesn't need to be shared with anything else (Obviously you may have a reason for storing it in vuex that does make sense).

Upvotes: 1

Related Questions