V-bind 未在存储状态更改时更新 class

Question

我对 Vue 和 Nuxt 还很陌生。我正在努力让自己的头脑清醒过来 $stores.

我创建了一个状态对象并给它一个属性，这是一个简单的布尔值。我想根据属性是否为 true 向元素添加 class。以下是我创建商店的方式：

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 class 不会切换，但最后 <div> 中的文本会 得到更新。我想知道我在这里做错了什么。对本地数据做同样的事情属性似乎按预期工作。

Answer 1

首先，你不应该在突变之外改变 $store 状态。

您需要在您的商店中添加一个变异方法来更新userSidebarVisible:

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

其次，如果您希望 Vue 实例的数据反映状态数据，您可以使用 getter 和 setter 函数使 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>

V-bind 未在存储状态更改时更新 class

V-bind not updating class on store state change

vue.js

vuejs2

vuex