-1

I am moving from classic vuex to modular vuex, but i need some help understanding how to call getters in my app. Here's what I have in store:

store/user.js:

export const state = () => ({
  currentUser: null,
  userProfile: {}
})
export const getters = {
  loggedIn(state) {
    return !!state.currentUser
  }
}

When I call loggedIn from my app, I get loggedIn as undefined. Here's how I am calling loggedIn:

src/components/MainNav.vue:

computed: {    
loggedIn() {
      return this.$store.getters.user.loggedIn
    }
}

Anyone spot what I am doing wrong? Thank you!

redshift
  • 4,815
  • 13
  • 75
  • 138
  • so I had to add `mapGetters` to my code and it works now. I'll update my answer accordingly...but perhaps others have better ways to approach this thank. – redshift Jan 13 '21 at 18:25
  • 1
    Why do you use user between getters and loggedIn ? do you have multiple stores ? – omerS Jan 13 '21 at 21:44

1 Answers1

1

Your store has the user namespace, so you have to call your loggedIn getter as below:

computed: {    
  loggedIn() {
    return this.$store.getters['user/loggedIn']
  }
}

Another way is to use the mapGetter helper, as explains in Vuex docs

Nicolas Pennec
  • 7,533
  • 29
  • 43