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

【问题标题】：How to set dynamic styles in Vue.js component from Vuex store如何在 Vuex 商店的 Vue.js 组件中设置动态样式
【发布时间】：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 谢谢你是对的

标签： vue.js vuejs2 vue-component vuex nuxt.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：