Vuex store getter empty

Question

I'm following the sample code in the Vuex guide and I'm getting a weird result (at least for me).

Vuex Store

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    name: ""
  },

  mutations: {
    updateName(state, newName) {
      state.name = newName;
    }
  },

  getters: {
    getName: state => state.name
  }
});

export default store;

Component, inside the <script> tags:

import { mapGetters } from "vuex";

export default {
  name: "Home",

  data: function() {
    return {
      showingName: true
    };
  },

  computed: {
    ...mapGetters(["getName"])
  },

  methods: {
    getNameHandler() {
      // eslint-disable-next-line
      console.log(this.$store.getters.getname); // returns undefined
    }
  }
};

Here is a live sample: https://codesandbox.io/s/yww774xrmj

Basically the question is, why the console.log returns undedined?. you can see that by clicking the button in the Home component. I'm following the same pattern as shown in the official Vuex guide:

https://vuex.vuejs.org/guide/getters.html#property-style-access

Unless I'm missing an import or a Vue.use(), but what gets my attention is that using the ´mapGetters´ actually allows me to use the getter as a computed property. You can change the name property of the state with the button in the About component.

It's a typo. Your getter is getName but you're trying to log getname — Phil
Ohh... this is effing embarrassing :|, One tends to think that after some time you don't do this kind of mistakes... Thanks @Phil !! — Rodrigo
Ahaha, I feel you tend to do them more ;-). I wish all questions on SO were this detailed though — Phil
I moderate in the GreenSock forums, so I know the pain of non-concrete and succinct questions — Rodrigo

Steven Spungin Steven Spungin · Accepted Answer · 2018-09-28T00:28:17

The getter name is case-sensitive.

this.$store.getters.getName

You have

this.$store.getters.getname

Vuex store getter empty

2 Answers