nuxt.jsvuexvuexfire

Classic Vuex to Modular: Why is Getter now undefined?


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!


Solution

  • 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