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>