Question

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

我遇到的问题是我的样式属性在我的VueX商店更改后没有更新。

代码示例：

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

这是一个如何使用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中）。

使用Computed Properties和VueX进行样式绑定

1 个答案: