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实例的数据反映状态数据，可以使用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不会更新存储状态更改时的类

1 个答案: