[Vuejs]-Vuex mapGetters error ''Property or method "isAuthenticated" is not defined''

by

3👍

✅

You have two different errors in your two different approaches. Let’s see your first approach first:

---
  <span
    v-if='this.isAuthenticated'
---
computed: {
    ...mapGetters([
      'auth/isAuthenticated',
    ]),
  }
---

Here, your problem is that you’re trying to map a namespaced getter, but trying to access the attribute without the namespace. You can work around this by using an object parameter for the mapGetters function:

computed: {
    ...mapGetters({
      isAuthenticated: 'auth/isAuthenticated',
    }),
  }

In your second approach, you almost get it right, but you run into a different set of issues:

isAuthenticated: () => this.$store.getters.isAuthenticated

First of all, if the module is namespaced, the correct way to access the getter would be this.$store.getters['auth/isAuthenticated'].

Apart from that, you should not use arrow functions in Vue components, since the this context is lost (it points to the function rather than the Vue instance). You need to use a regular function.

Combining both of these fixes, the result would be:

isAuthenticated(){ 
  return this.$store.getters['auth/isAuthenticated']
}
👤Varo

Leave a comment