title: vuex store getters not working in a component
body: <p>Can anyone see why this wouldn't work please, </p>
  
  <p>Trying to use vuex store to manage my axios requests and transfer to a component as follows:</p>
  
  <p>In my vuex store module I have the following</p>
  
  <pre><code>import axios from "axios";
  export const state = () =&gt; ({
      cases: [],
    })
  
    export const mutations = {
  
      listCases (state, cases) {
        state.cases = cases;
      },     
    }
  
    export const actions = {
  
      loadCases ({ commit, context }) {
  
        return axios.get('http')
        .then(res =&gt; {
          const convertCases = []
          for (const key in res.data) {
            convertCases.push({ ...res.data[key], id: key })
          }
          commit('listCases', convertCases)
        })
        .catch(e =&gt; context.error(e));
      },
  
    export const getters = {
    // return the state
      cases(state) {
        return state.cases
      }
    }
  </code></pre>
  
  <p>I checked amd my axios request is returning my results as expected and passing to the mutation</p>
  
  <p>In my component I have</p>
  
  <pre><code>import { mapMutations, mapGetters, mapActions } from 'vuex'
  
  export default {
  
    created () {
      this.$store.dispatch('cases/loadCases');
    },
  
    computed: {
        ...mapGetters ({
        cases: 'cases/cases'
      })
  },
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Now i assumed based on what I've learnt that i could call with 
   and this would return my items. </p>
  
  <p>but i get an error cases is not defined, </p>
  
  <p>Anyone abe to tell me my error please</p>
  
  <p>Many Thanks</p>