title: Vuex getters return undefined
body: <p>Here's my <code>store.js</code> code :</p>
  
  <pre><code>export const store = new Vuex.Store({
      state: {
          staffID: '',
          count: 0,
      },
      getters:{
          getStaffID: state =&gt; {
              console.log("13 getStaffID: " + state.staffID)
              return state.staffID;
          }
      },
      mutations: {
          UPDATE_STAFFID: (state,value) =&gt; {
              state.staffID = value
              console.log("20 mutations: " + state.staffID)
          },
      },
      actions: {
          update_staffID: (context, payload) =&gt; {
              context.commit("UPDATE_STAFFID", payload)
          }
      }
    })
  </code></pre>
  
  <p>And in my component, there's a button which will call this:</p>
  
  <pre><code>this.$store.commit('UPDATE_STAFFID','miow')
  console.log("store.getStaffID: " + this.$store.getStaffID);
  console.log("store.staffID: " + this.$store.staffID);
  </code></pre>
  
  <p>The resulting log will display this:</p>
  
  <pre><code>20 mutations: miow
  13 getStaffID: miow
  store.getStaffID: undefined
  store.staffID: undefined
  </code></pre>
  
  <p>This is very confusing for me. From the log, I can conclude that:</p>
  
  <ul>
  <li>mutation UPDATE_STAFFID runs OK</li>
  <li><code>state.staffID</code> inside getStaffID getter in store.js will output the desired value which is <code>miow</code></li>
  <li>but the return value from the getter above will somehow return <code>undefined</code></li>
  <li>trying to access the staffID value directly using <code>this.$store.staffID</code> will also return undefined</li>
  </ul>
  
  <p>Why those <code>undefined</code>?</p>