使用计算属性和VueX进行样式绑定

Question

如何在与VueX集成的同时使用VueJS中的计算属性绑定样式。

我遇到的问题是关于我的样式属性在我的VueX Store中发生更改后未更新。

代码示例：

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

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

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

Answer 1

下面是如何使用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中的理由，这是有道理的）。