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

Question

我正在尝试直接从商店中设置一系列组件样式，以便当商店发生更改时，每个组件的设计也会发生更改。

我将一组链接存储在我的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
    }
},

但是无论何时我将背景色的值从'blue'更改为'red'，我都必须重新加载页面才能看到更改。每次我叫突变时，都需要强制重新渲染页面吗？

这是我的参考突变：

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

而且我会这样从组件中调用它：

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

Answer 1

那是因为您直接在return this.$store.state.links处从存储中读取值。这样，它既不是反应式的，也不是反模式的，因为您不应该那样访问存储。

您应该创建吸气剂以获取价值，然后应该可以。