Classic Vuex to Modular: Why is Getter now undefined?

Question

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!

Answer 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