After login, I set the state (isLogin: false) value to be true.

So, if the RouterLink in the header.vue bind v-if="$store.state.isLogin === false", I want to make the login router is visible.

If $store.state.isLogin === true, I want to make logout button visible on the header.

So, I tried to solve it with v-if and v-else, but it didn't work well.

If I click the logout button UserLogout() defined in the method must be executed, and logout() mutation must be executed.

So, after the logout mutation was executed, the isLogin value of the state was changed to false, and location.reload() was executed. but it still doesn't work.

If I'm doing something wrong, please tell me what's wrong. Or Please let me know if there is any other good way to make the button visible or invisible depending on login status.

            <RouterLink
              v-if="$store.state.isLogin === false"
              to="/Login"
              active-class="active"
              class="nav-link">
              로그인
            </RouterLink>
            <button
              v-else
              type="button"
              @click="UserLogout"
              active-class="active"
              class="nav-link btn btn-primary btn-sm">
              로그아웃
            </button>
          </li>

  methods: {
    UserLogout() {
      this.$store.dispatch('loginService/logout')
    }
  }

import axios from 'axios'

export default {
  namespaced: true,
  state: {
    UserInfoObj: {
      id: '',
      password: ''
    },    
      isLogin: false,
      isLoginError: false
  },
  getters: {

  },
  mutations: {
    login: (state) => {
      console.log(state.UserInfoObj)
      axios.post('http://??.???.???.???:????/api/login', state.UserInfoObj)
      .then(res => {
        if(res.data.code === "E0008") {  
          console.log(res)
          alert("로그인 완료")
          state.isLogin = true
          state.isLoginError = false
        }
      })
      .catch(() => {
        alert("아이디 또는 비밀번호를 정확히 입력해 주세요.")
      })
    },
    logout(state) {
      console.log(state.UserInfoObj)
      location.reload()
      state.isLogin = false
    }
  },
  actions: {
    async login({ commit }, payload) {
      return await commit('login', payload)
      
    },
    logout({ commit }) {
      commit('logout')
    }
  }
}

CodePudding user response：

According to vuex document:

mutations are synchronous transactions

But you have asynchronous transactions in your login mutation. Try to move asynchronous transactions to action. You can read about actions in here.

CodePudding user response：

You put your async calls in actions, and commit mutations :

mutations: {
    isLogged(state, logged) {
      state.isLogin = logged;
    },
    isLoggedError(state, logged) {
      state.isLoginError = logged;
    },
  },
  actions: {
    async login({ commit }, payload) {
      await axios.post('http://??.???.???.???:????/api/login', state.UserInfoObj)
      .then(res => {
        if(res.data.code === "E0008") {  
          commit('isLogged', true);
          commit('isLoggedError', false);
        }
      })
      .catch(() => {
        alert("아이디 또는 비밀번호를 정확히 입력해 주세요.")
      })
    },
    logout({ commit }) {
      location.reload()
      commit('isLogged', false);
    }

CodePudding user response：

<ul class="navbar_menu">
          <li class="navbar_item">
            <RouterLink
              v-if="$store.state.isLogin === false"
              to="/Login"
              active-class="active"
              class="nav-link">
              로그인
            </RouterLink>
            <button
              v-else
              type="button"
              @click="UserLogout"
              active-class="active"
              class="nav-link btn btn-primary btn-sm">
              로그아웃
            </button>
          </li>
          <li class="navbar_item">
            <RouterLink
              v-if="$store.state.isLogin === false"
              to="/Join"
              active-class="active"
              class="nav-link">
              회원가입
            </RouterLink>
          </li>

  methods: {
    UserLogout() {
      this.$store.commit('loginService/logout')
    }
  }

import axios from 'axios'

export default {
  namespaced: true,
  state: {
    UserInfoObj: {
      id: '',
      password: ''
    },    
      isLogin: false,
      isLoginError: false
  },
  getters: {

  },
  mutations: {
    logout(state) {
      console.log(state.UserInfoObj)
      state.isLogin = false
      state.UserInfoObj.id = ''
      state.UserInfoObj.password = ''
      console.log(state.isLogin)
    }
  },
  actions: {
    login: (state) => {
      console.log(state.UserInfoObj)
      axios.post('http://??.???.???.???:????/api/login', state.UserInfoObj)
      .then(res => {
        if(res.data.code === "E0008") {  
          console.log(res)
          alert("로그인 완료")
          state.isLogin = true
          state.isLoginError = false
        }
      })
      .catch(() => {
        alert("아이디 또는 비밀번호를 정확히 입력해 주세요.")
      })
    }
  }
}