計算されたプロパティとVueXを使用したスタイルバインド

Question

VueXとの統合中に、VueJSで計算されたプロパティを使用してスタイルをバインドする方法を教えてください。

私の問題は、自分のVueX Storeの変更後に私のスタイルプロパティが更新されないことです。

コード例：ここでは

//VueX Store 
 
const store = new Vuex.Store({ 
 
\t state : { 
 
\t \t div: [ 
 
\t \t \t { 
 
\t \t \t \t offset: 0, 
 
\t \t \t \t width: 1, 
 
\t \t \t \t text : 'Hello World' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t offset: 0, 
 
\t \t \t \t width: 1, 
 
\t \t \t \t text : 'Hello World As Well' 
 
\t \t \t } 
 
\t \t ] 
 
    } 
 
});

//My component 
 
<template> 
 
\t <div v-bind:style="{ width: width, left: offset}"> 
 
\t \t <p>{{text}}</p> 
 
\t </div> 
 
</template> 
 

 
<script> 
 
export default { 
 
\t \t name: 'divBox', 
 
\t \t computed : { 
 
\t \t \t text : function() { 
 
\t \t \t \t return this.$store.state.div[this.Id].text; 
 
\t \t \t }, 
 
\t \t \t width : function() { 
 
\t \t \t \t return this.$store.state.div[this.Id].width; 
 
\t \t \t }, 
 
\t \t \t offset : function() { 
 
\t \t \t \t return this.$store.state.div[this.Id].offset; 
 
\t \t \t } 
 
\t \t }, 
 
\t \t 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に格納する理由があるかもしれません）。