'When computed method changes doesn't update
I have a component that has an icon that I want to show only if the method from getters returns true. That method returns true when a user logged in. I am using a computed property to track the changes but I have to reload the page so that computed method can be updated.
<template>
<div class="icon" v-if="isUserLoged" >
<i class="fa fa-star"></i>
</div>
</template>
<script>
export default {
computed: {
isUserLoged() {
return this.$store.getters.isUserLoged;
},
},
};
</script>
getters:{
isUserLoged(state){
return state.auth_token !== null
},
}
actions:{
login({commit},payload){
return axios.post("/users/login",payload)
.then(data => {
commit('SET_TOKEN',data.data.auth_token)
})
.catch(error => {
return error.response
})
},
},
mutations:{
SET_TOKEN(state,data){
state.auth_token = data
},
}
Token is set when login api is called on actions section
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
