如何在 Vuex 商店的 Vue.js 组件中设置动态样式

Posted 2023-02-23

【中文标题】如何在 Vuex 商店的 Vue.js 组件中设置动态样式

【英文标题】：How to set dynamic styles in Vue.js component from Vuex store

【发布时间】：2020-05-09 15:29:24

【问题描述】：

我正在尝试直接从 store 中设置一组组件样式，这样当 store 发生变化时，每个组件的设计也会发生变化。

我在我的 Vuex 商店中存储了一组链接，如下所示：

links: [
    id: 1, text: 'Banana is a test', design: color: 'red', 'background-color': 'blue', padding: '51px', margin: '5px', 'border-width' : '10px', 'border-color': 'blue', 'font-weight' : 600, font: 'Arial',
    id: 2, text: 'This is a test', design: color: 'red', 'background-color': 'blue', padding: '20px', margin: '10px', 'border-width' : '10px', 'border-color': 'green', 'font-weight' : 600, font: 'Arial',
    id: 3, text: 'Monkey is a test', design: color: 'red', 'background-color': 'blue', padding: '5px', margin: '5px', 'border-width' : '10px', 'border-color': 'green', 'font-weight' : 600, font: 'Arial',
]

这就是我尝试渲染它们的方式

<a v-for="link in links" :key=link.id :href="link.destination" :id=link.id :style="link.design">
   link.text
</a>

问题是，当 Vuex 商店中的设计对象发生变化时，链接样式不会像我预期的那样随后更新。

在我的 Vue 组件中，我尝试以不同的方式获取链接，假设这会改变反应性。目前我使用这样的计算方法来获取它们：

computed: 
    getLinks: function() 
        return this.$store.state.links
    
,

但每当我更改背景颜色的值时，例如从“蓝色”到“红色”，我都必须重新加载页面才能看到更改。每次调用突变时是否需要强制重新呈现页面？

这是我的变异供参考：

setSelectedItemDesign (state, payload ) 
    state.selectedItem.design[Object.keys(payload)[0]] = Object.values(payload)[0]

我会像这样从我的组件中调用它：

this.$store.commit('setSelectedItemDesign', 'background-color' : this.rgbaValue)

【问题讨论】：

样式名用驼峰写法，例如：fontSize

我认为此链接可能对您有所帮助。 vuejs.org/v2/guide/list.html#Array-Change-Detection

@nada 谢谢你是对的

【参考方案1】：

那是因为您直接在此处return this.$store.state.links 从商店中读取值。这样它就不是被动的，也不是反模式，因为你不应该像那样访问商店。

您应该创建 getter 来获取价值，然后就可以了。

【参考方案2】：

问题在于，正如 nada 正确指出的那样，我没有以 Vue 观察到的触发视图更新的方式更新商店中的数组。

您可以在此处查看更多详细信息：vuejs.org/v2/guide/list.html#Array-Change-Detection