How to avoid the undefined errors in Vue projects when you empty Vuex objects?

Viewed 1629

Example. I have a user Vuex data that I use like this in templates:

// Inside <template>
<button
  v-if="!user.expiredInfo.isExpired"
</button>

// Inside <script>
data () {
 return {
   disable: this.user.expiredInfo.isExpired ? 'text-muted' : '',
 }
}

I have an action that does this:

const state = {
  user: {}
}

async logout ({ commit }) {
  commit('SET_USER', {})
},

So there's an error when I logout:

TypeError: Cannot read property 'isExpired' of undefined

How to prevent this kind of problems?

1 Answers
Related