V-bindがストア状態のクラスを更新しない

Question

VueとNuxtの新機能です。私は$storeの周りに私の頭を得ようとしています。

私は状態オブジェクトを作成し、単純なブール値のプロパティを与えました。そのプロパティがtrueかどうかに応じて、要素にクラスを追加したいと思います。ここで私は店を作成した方法は次のとおりです。

<template> 
    <div> 
     <div>Hello!</div> 
     <button v-on:click="showSidebar">Click</button> 
     <div v-bind:class="{active: userSidebarVisible}">the sidebar</div> 
     <div>{{$store.state.userSidebarVisible}}</div> 
    </div> 
</template> 



<script> 
    export default { 
     data: function() { 
      return { 
       userSidebarVisible: this.$store.state.userSidebarVisible, 
      } 
     }, 
     methods: { 
      showSidebar: function() { 
       if (this.$store.state.userSidebarVisible === true) { 
        this.$store.state.userSidebarVisible = false; 
       } else { 
        this.$store.state.userSidebarVisible = true; 
       } 
      } 
     } 
    } 
</script> 

私はbuttonをクリックすると、activeクラスは切り替えが、最後の内のテキストはありません：私は、次のを持っている私のvueファイルで

const store =() => { 
    return new Vuex.Store({ 
     state: { 
      foo: "You got the global state!", 
      userSidebarVisible: true 
     }, 
    }) 
} 

<div>が更新されます。私はここで間違って何をしているのだろうかと思います。ローカルデータプロパティで同じことを行うことは意図した通りに動作するようです。

Answer 1

まず、$storeの状態を突然変異の外側で変更しないでください。あなたはuserSidebarVisibleを更新するためにお店に変異メソッドを追加する必要が

：

state: { 
    userSidebarVisible: true 
}, 
mutations: { 
    SET_USER_SIDEBAR_VISIBLE(state, value) { 
    state.userSidebarVisible = value; 
    } 
} 

あなたは状態データを反映するために、あなたのVueのインスタンスのデータが必要な場合は第二に、あなたはゲッターとuserSidebarVisible計算されたプロパティを作ることができますし、セッター機能：

computed: { 
    userSidebarVisible: { 
    get() { 
     return this.$store.state.userSidebarVisible; 
    }, 
    set(value) { 
     this.$store.commit('SET_USER_SIDEBAR_VISIBLE', value); 
    } 
    } 
} 

ここでは例です：

const store = new Vuex.Store({ 
 
    state: { 
 
    userSidebarVisible: true 
 
    }, 
 
    mutations: { 
 
    SET_USER_SIDEBAR_VISIBLE(state, value) { 
 
     state.userSidebarVisible = value; 
 
    } 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    store, 
 
    computed: { 
 
    userSidebarVisible: { 
 
     get() { 
 
     return this.$store.state.userSidebarVisible; 
 
     }, 
 
     set(value) { 
 
     this.$store.commit('SET_USER_SIDEBAR_VISIBLE', value); 
 
     } 
 
    } 
 
    }, 
 
    methods: { 
 
    toggleSidebar() { 
 
     this.userSidebarVisible = !this.userSidebarVisible; 
 
    } 
 
    } 
 
})

.active { 
 
    color: green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.0/vuex.min.js"></script> 
 
<div id="app"> 
 
    <button v-on:click="toggleSidebar">Click</button> 
 
    <div v-bind:class="{active: userSidebarVisible}">the sidebar</div> 
 
    <div>Global state: {{$store.state.userSidebarVisible}}</div> 
 
    <div>Vue instance state: {{userSidebarVisible}}</div> 
 
</div>