Style-Binding using Computed Properties and VueX - binding

Question

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>

Answer 1

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).