title: Vuex data store not found in components
body: <p>I'm using a project with Vue, Vuetify, Vue-Router, and Vuex.  The intent was to create a basic layout with a sidebar in a more module approach to dabble in scalability with Vue.  So I created a folder called Store, which has a modules folder.  So my index file within the store folder is as follows:</p>
  
  <pre><code>import Vue from 'vue';
  import Vuex from 'vuex';
  import global from './Modules/Global';
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
       modules: {
            site: global
       }
  });
  </code></pre>
  
  <p>The module is broken down into a single file with actions, getters, mutations, and state.</p>
  
  <pre><code>const actions = {
      sidebarState: ({ commit }, status) =&gt; {
          commit('openOrCloseSidebar', status);
      }
  }
  
  const mutations = {
      openOrCloseMenu: (status) =&gt; {
          if (status !== true)
              return state.sidebar = true;
  
          return state.sidebar = false;
      }
  };
  
  const getters = {
  
  };
  
  const state = {
      sidebar: true
  };
  
  export default {
      namespaced: true,
      actions,
      mutations,
      getters,
      state
  };
  </code></pre>
  
  <p>I invoke the Vue instance as follows.</p>
  
  <pre><code>import Vue from 'vue/dist/vue';
  import Vuetify from 'vuetify';
  import Axios from 'axios';
  
  import application from './Template/Application.vue';
  
  import router from './Router';
  import store from './Store';
  import { sync } from 'vuex-router-sync';
  
  Vue.use(Vuetify);
  Vue.use(router);
  Vue.use(store);
  
  sync(store, router);
  
  var vue = new Vue({
      el: '#application',
      template: '&lt;application&gt;&lt;/application&gt;',
      components: {
          application
      },
  
      router: router,
      store: store
  });
  </code></pre>
  
  <p>However, when I call <code>this.$store.global.state.sidebar</code> or <code>this.$store.state.sidebar</code> Vue is unable to find my property.  I receive the error:</p>
  
  <blockquote>
    <p>Cannot read property global of undefined.</p>
  </blockquote>
  
  <p>The error also references state, but I believe since I'm using namespace the syntax should mirror above.  Where I attempt to call that is here.</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-container&gt;
          &lt;application_sidebar :my-prop="menu"&gt;&lt;/application_sidebar&gt;
          &lt;application_navigation :my-prop="menu"&gt;&lt;/application_navigation&gt;        
      &lt;/v-container&gt;
  &lt;/template&gt;
  
  &lt;script type="text/javascript"&gt;
      import application_navigation from './Navigation.vue'
      import application_sidebar from './Sidebar.vue';
      import { mapState } from 'vuex';
  
      export default ({
          components: {
              application_navigation,
              application_sidebar
          },
  
          data: {
              menu: this.$store.global.state.sidebar
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm trying to access my state and learn how to correctly emit, so in the navigation component I can emit upward so the value is reflected to move the sidebar open or close.</p>
  
  <p>Any help would be terrific, I'm quite new to Vue.</p>