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

Posted 2023-02-23

【中文标题】使用计算属性和 VueX 的样式绑定

【英文标题】：Style-Binding using Computed Properties and VueX

【发布时间】：2017-03-10 01:04:03

【问题描述】：

如何在与 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>

【参考方案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 中）。

【讨论】：

这行得通！非常感谢！顺便说一句，我设置了突变 -> 但由于某种原因，它们无法正常工作。

@NathanielDeshpande 如果这回答了问题，请不要忘记接受它作为正确答案。如果您找到更好的答案，请务必发布。