title: The context of this not provided to the modules exporting
body: <p><em>I'm displeased with the formulation of the question. Feel encouraged to suggest an improvement. Also, please keep in mind that due to ignoyance (ignorance leading to annoyance), I might have flawed diagnostics of hte issue. Sorry about that.</em></p>
  
  <p>In <a href="https://stackoverflow.com/a/40893583/1525840">this answer</a> it's suggested to use <code>this.$store.xxx</code> and it fails in my code because <code>this</code> is undefined. I strongly suspect something stupid being done by the author of the code (that would be me), so I'll present the schematics of my component layout.</p>
  
  <p>The way it's intended is that I have a landing page <em>index.js</em> that creates two components - one for the visuals of the application and one for the storage of information. The visual <em>App</em> will consist of a navigation bar (and a rendering area later on). The navbar will dispatch commands to the store (and to the viewing area) rendering different *.vue files showing tables, lists etc.</p>
  
  <p>So, how come I get to see the text <em>this is undefined</em>? Is my structure entirely flawed or am I just missing a small detail here and there?</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import Vue from "vue"
  import Store from "./vuex_app/store"
  import App from "./vuex_modules/app.vue"
  new Vue({ el: "#app-base", components: { App }, store: Store });
  </code></pre>
  
  <p><strong>store.js</strong></p>
  
  <pre><code>import Vue from "vue";
  import Vuex from "vuex";
  Vue.use(Vuex);
  const state = { ... };
  const mutations = { ... };
  export default new Vuex.Store({ state, mutations });
  </code></pre>
  
  <p><strong>app.vue</strong></p>
  
  <pre><code>&lt;template&gt;&lt;div id="app"&gt;App component&lt;navigation&gt;&lt;/navigation&gt;&lt;/div&gt;&lt;/template&gt;
  &lt;script&gt;
  import navigation from "./navigation.vue"
  export default { components: { navigation } }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>navigation.vue</strong></p>
  
  <pre><code>&lt;template&gt;&lt;div id="nav-bar"&gt;&lt;p v-on:click="updateData"&gt;Update&lt;/p&gt;&lt;/div&gt;&lt;/template&gt;
  &lt;script&gt;
  import { updateData } from "../vuex_app/actions";
  export default {
    vuex: {
      actions: { updateData },
      getters: { ... }
    },
    methods: {
      updateData: () =&gt; { 
        console.log("this is " + this);
        this.$store.dispatch("updateData");
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>actions.js</strong></p>
  
  <pre><code>export const updateData = ({dispatch}, data) =&gt; { 
    console.log("invoked updateData"); 
    dispatch("UPDATE_DATA", data); 
  };
  </code></pre>