V-bind 在存储状态更改时不更新类

Question

我对 Vue 和 Nuxt 还很陌生。我正在努力摆脱困境$store。

我创建了一个状态对象并给它一个简单布尔值的属性。我想根据该属性是否为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);
    }
  }
}

这是一个例子：

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

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;
    }
  }
})