V-bind不更新商店状态更改的类

Question

我对Vue和Nuxt非常新颖。我试图让我的脑袋围绕着$store s。

我创建了一个状态对象，并给它一个属性，它是一个简单的布尔值。我想添加一个类到一个元素取决于该属性是否为true。下面是我如何创建存储：

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

在我vue文件我有以下几点：

<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类不切换，但在过去的文本<div>确实获取更新。我想知道我在这里做错了什么。用本地数据属性做同样的事情似乎按预期工作。

Answer 1

首先，你不应该改变$store状态以外的变异。

您需要的突变方法添加到您的商店的更新userSidebarVisible：

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

其次，如果你想让你的Vue实例的数据，以反映状态数据，可以使userSidebarVisible一个计算的属性与getter和setter函数：

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>