title: Update : Mutation recieve the store, not the state
body: <p>This post has an update, see the first answer</p>
  
  <p>So, first of all, I did search for similar problems (and found a few threads) but nothing solved my problem. I'm trying to use quasar framework for the first time and maybe I got lost somewhere in the namespaces or something.</p>
  
  <p>So, first, some info :
  +I don't have any error when compiling with ESLint<br>
  +I don't have any error in my javascript console at runtime<br>
  <strong>My problem is :</strong><br>
  +My actions and mutation do save something in the store, but not where it should (see screenshot at end of post)<br>
  +My getter does not seems to work, and is displayed as "undefined" in the vue dev tool  </p>
  
  <p>My store is organized like that : </p>
  
  <pre><code>+store [folder]  
  + index.js  
  + app-utils [folder]  
  --+ index.js  
  --+ getters.js  
  --+ actions.js  
  --+ mutations.js  
  --+ state.js  
  </code></pre>
  
  <p><strong>Code of the root index.js :</strong><br>
      import Vue from 'vue'
      import Vuex from 'vuex'</p>
  
  <pre><code>import appUtils from './app-utils'
  
  Vue.use(Vuex)
  
  const store = new Vuex.Store({
    modules: {
      appUtils
    }
  })
  
  export default store
  </code></pre>
  
  <p><strong>Then, in the folder 'app-utils' : 
  Code for index.js :</strong> </p>
  
  <pre><code>import state from './state'
  import * as getters from './getters'
  import * as mutations from './mutations'
  import * as actions from './actions'
  
  export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
  }
  </code></pre>
  
  <p><strong>Code for state.js :</strong> </p>
  
  <pre><code>export default {
    state: {
      currentPageTitle: 'Hello'
    }
  }
  </code></pre>
  
  <p><strong>Code for getters.js :</strong> </p>
  
  <pre><code>export const getPageTitle = (state) =&gt; {
    console.log('GET TITLE: ' + state.currentPageTitle)
    return state.currentPageTitle
  }
  </code></pre>
  
  <p><strong>Code for mutations.js :</strong> </p>
  
  <pre><code>export const setPageTitle = (state, newPageTitle) =&gt; {
    console.log('MUTATION SET TITLE: ' + newPageTitle)
    state.currentPageTitle = newPageTitle
  }
  
  export const deletePageTitle = (state) =&gt; {
    console.log('MUTATION DELETE TITLE')
    state.currentPageTitle = ''
  }
  </code></pre>
  
  <p><strong>Code for actions.js :</strong> </p>
  
  <pre><code>export const setPageTitle = (context, newPageTitle) =&gt; {
    console.log('ACTION SET TITLE: ' + newPageTitle)
    context.commit('setPageTitle', newPageTitle)
  }
  
  export const deletePageTitle = (context) =&gt; {
    console.log('ACTION DELETE TITLE')
    context.commit('deletePageTitle')
  }
  </code></pre>
  
  <p><strong>The code from where i am trying to access it (int the getPageTitle computed field):</strong> </p>
  
  <pre><code>&lt;template&gt;
    &lt;q-page&gt;
      &lt;q-resize-observable @resize="onResize" /&gt; TITLE : {{getPageTitle}}
      &lt;div class="row"&gt;
      &lt;/div&gt;
    &lt;/q-page&gt;
  &lt;/template&gt;
  
  
  import { mapGetters, mapActions } from 'vuex'
  
  export default {
    data: () =&gt; ({
      pageSize: {
        height: 0,
        width: 0
      }
    }),
    mounted () {
      this.setPageTitle('Template manager')
    },
    destroyed () {
      this.deletePageTitle()
    },
    computed: {
      ...mapGetters('appUtils', [
        'getPageTitle'
      ])
    },
    methods: {
      ...mapActions('appUtils', [
        'setPageTitle',
        'deletePageTitle'
      ]),
      onResize (size) {
        this.pageSize = size
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>Finaly, screenshot from the vue plugin , you can see the value has been set upon triggering the mounted() hook, but not in the 'state', and the getter is undefined.</p>
  
  <p><a href="https://i.stack.imgur.com/cADYC.png" rel="nofollow noreferrer">Screenshot from the vue dev plugin</a></p>