vuex 데이터 바인딩 안됨

[유용환]

app.vue

<div v-if="$store.commit('users')">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin-left:12vw">
        <li class="nav-item">
          Thank-{{$store.commit('new_users')}}
        
        <li class="nav-item">
          로그아웃
        
        
      </div>


login.vue

methods : {
    enuser(){
      firebase.auth().signInWithEmailAndPassword(this.enuser_email, this.enuser_pw).then(()=>{
      alert('login complete');
      this.$store.commit('users')
      this.$router.push('/');
      
      
  }).catch(()=>{
    alert('login failed')
  })
}
    }

store.js

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      todo : false,
      new_us : 0, 
    }
  },

  mutations : {
    users(state){
      state.todo = true
    },

    new_users(state){
      state.new_us++
    }
  },
})

export default store

이렇게 했을때 사용자가 로그인을 하면 store.js의 users 함수를 사용하여 login.vue에서 todo : false를 true로 바꾸게 한후
app.vue에서 todo : true이면 해당 html을 보여주도록 하려고 하는데 실행하면 아무것도 나오지 않습니다.
경고나 에러문도 나오지 않는데 어떻게 해야하나요 아예 조건에 만족했을때의 html이 동작을 안합니다.

[codingapple]

true로 실제로 바뀌는지 출력부터 해봅시다 

[유용환]

login.vue에서 console.log로 출력해봤더니 true가 나옵니다. 
app.vue 에서  v-if="$store.commit('users')" 일때 해당 html이 안나옵니다.
위의 조건이 맞으니까 해당 html이 나와야하는거 아닌가요

[codingapple]

store데이터 출력하려면 $store.state.어쩌구입니다

[유용환]

store.js의 저장된 값을 변경하려면 mutation함수에 함수를 만들고 그것을 사용해야 하는거아닌가요

[codingapple]

state가 true일 경우 html을 보여주고 싶으면 state 출력해서 그게 true인지 등호로 검사하면 됩니다

[글쓴이]

글