V-bind 스토어 상태 변경 시 클래스를 업데이트하지 않음

V-bind 스토어 상태 변경 시 클래스를 업데이트하지 않음

나는 Vue와 Nuxt를 처음 봐.나는 정신을 차리려고 노력하고 있다.$stores

나는 국가 오브젝트를 만들어 단순 부울인 속성을 부여했다.그 속성의 유무에 따라 요소에 클래스를 추가하고 싶다.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> 최신 정보를 얻을 수 있다.내가 여기서 뭘 잘못하고 있는지 궁금하다.로컬 데이터 속성과 동일한 작업을 수행하는 것이 의도한 대로 작동하는 것 같다.

우선, 당신은 그 사실을 바꾸면 안 된다.$store돌연변이를 피하다

업데이트를 위해 스토어에 돌연변이 방법을 추가해야 함userSidebarVisible:

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

둘째, Vue 인스턴스의 데이터가 상태 데이터를 반영하도록 하려면userSidebarVisiblegetter 및 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>

참조URL: https://stackoverflow.com/questions/46412905/v-bind-not-updating-class-on-store-state-change